我有一个包含一些书名和价格的数组页面,并在其中填充了书名。我正在使用铆钉选择项目并在下面显示所选项目。
我的下拉选择列表正在运行。但是它没有在下拉列表下面显示选中的项目,或者换句话说,我想将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/