Question

我有一个带有一些书籍标题和价格的数组的页面，我用书籍标题填充了一个选择。我使用铆钉来选择项目并在下面显示所选项目。

我的下拉列表选择列表正在运行。但是它没有在下拉列表下面显示所选项目，或者换句话说我想将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绑定到视图的最佳方法是什么？

Answer 1

您可以将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>

我希望它有所帮助！

Answer 2

你必须使用一些Rivets事件处理程序，例如：

<button rv-on-click="clickHandler">Remove</button>

然后你需要在你的模型中有一个名为clickHandler的方法，如下所示：

var model = {
items: [1,2,3,4,5],
clickHandler: function(e){
    //handler code
}

};

这是一篇使用不同铆钉功能的博文（西班牙文，但您会理解代码示例）。

http://www.leomicheloni.com/post/2014/04/26/Automatic-html-binding-con-Rivetsjs.aspx

希望它有所帮助。

使用铆钉将数据绑定到选择元素的onchange的最佳方法

2 个答案: