我有一个包含一些书名和价格的数组页面,并在其中填充了书名。我正在使用铆钉选择项目并在下面显示所选项目。

我的下拉选择列表正在运行。但是它没有在下拉列表下面显示选中的项目,或者换句话说,我想将select的onchange事件绑定到数组上的当前项目。

那可能吗?如果可以,怎么办?

我搜索了互联网,但几乎没有学习铆钉的资源。这是我的代码:

<!DOCTYPE HTML>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Rivets test</title>
        <script src="../js/rivets.js"></script>
    </head>
    <body>

        <h3>Livros no saraiva.com.br</h3>

        <select id="select">
            <option rv-each-book="books">{book.title}</option>
        </select>

        <br><br>

        <div id="contents">
            <strong>Título:</strong> <span>{book.title}</span><br>
            <strong>Valor:</strong> <span>{book.price}</span>
        </div>

        <script>

        var s = document.getElementById('select'),
            books = [
            {
                "title": "Como treinar o seu dragão",
                "price": 29.90
            },
            {
                "title": "Livro de colorir mangá",
                "price": 17.40
            },
            {
                "title": "Heróis para colorir",
                "price": 27.90
            },
            {
                "title": "O pequeno príncipe",
                "price": 17.70
            },
            {
                "title": "Guerra civil",
                "price": 21.70
            }
        ];

        rivets.bind(s, {"books": books});

        </script>

    </body>
</html>


使用铆钉将onchange绑定到视图的最佳方法是什么?

最佳答案

您可以将rv-value添加到select标记和options标记中,因为文字仅显示来自model属性的值,如下所示:



<select  rv-value="data.selectedBook">
  <option rv-each-book="books" rv-value="book.title">{ book.title }</option>
</select>

//and display the binded value as following:
 <strong>Título:</strong> <span>{data.selectedBook}</span>





希望对您有所帮助!

关于javascript - 使用铆钉将数据绑定(bind)到选择元素的onchange的最佳方法,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32144279/

10-09 12:51