在knockout.js中添加具有多个属性的新项目
我试图在单击按钮时将新项目添加到可观察数组中。我几乎遵循了 Knockout.js 网站上的这个示例： http://knockoutjs.com/examples/betterList.html
这是相关的 HTML：
<form data-bind="submit:addItem">
<input id="comment" data-bind="value:itemToAdd.comment, valueUpdate: 'afterkeydown'" />
<input type="submit" value="Save contact" />
</form>
正如您所见看（这是与示例的区别），我的“itemToAdd”将具有多个属性，其中之一是“comment”。所以我尝试像这样绑定它：“value:itemToAdd.comment”（我也尝试过“value:itemToAdd().comment”）。但这似乎不起作用。这是我的视图模型的相关部分：
var viewModel = {
contactHistory: [{comment: 'test', date: '12/12/2011'}, {comment: 'test2', date: '12/11/2011'}],
itemToAdd: new ko.observable({ comment: 'dd', date: '' }),
addItem: function () {
alert(this.itemToAdd().comment);
if (this.itemToAdd().comment != "")
{
this.contactHistory.push(this.itemToAdd());
}
}
}
警报始终显示“dd”，因此 itemToAdd 似乎没有正确绑定到文本框。有人知道我做错了什么吗？
I'm trying to add a new item to an observable array when a button is clicked. I'm pretty much following this example on the knockout.js site:
http://knockoutjs.com/examples/betterList.html
Here's the relevant HTML:
<form data-bind="submit:addItem">
<input id="comment" data-bind="value:itemToAdd.comment, valueUpdate: 'afterkeydown'" />
<input type="submit" value="Save contact" />
</form>
As you can see (this is the difference from the example), my "itemToAdd" will have multiple properties, one of them is "comment". So I'm trying to bind it like this: "value:itemToAdd.comment" (I also tried "value:itemToAdd().comment"). But that doesn't seem to work. Here's the relevant part of my view model:
var viewModel = {
contactHistory: [{comment: 'test', date: '12/12/2011'}, {comment: 'test2', date: '12/11/2011'}],
itemToAdd: new ko.observable({ comment: 'dd', date: '' }),
addItem: function () {
alert(this.itemToAdd().comment);
if (this.itemToAdd().comment != "")
{
this.contactHistory.push(this.itemToAdd());
}
}
}
The alert always displays "dd", so the itemToAdd doesn't seem to be properly bound to the text box. Does anyone haven an idea what I'm doing wrong?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
通常你会执行
itemToAdd().comment，但是当数据绑定中的属性不是可观察的并且是嵌套的时，KO 实际上无法正确写入。您当然可以通过将
comment设为可观察来解决此问题，例如： http://jsfiddle.net /rniemeyer/mFkGT/。在这种情况下，如果您不希望itemToAdd成为可观察对象，则不需要将其设置为可观察对象。另一种选择是在绑定
comment之前进入itemToAdd的范围。在 1.3 中，您可以使用with: itemToAdd，例如： http://jsfiddle.net /rniemeyer/SDahd/。如果您不想要额外的跨度，那么您可以使用无容器绑定，例如： http://jsfiddle.net /rniemeyer/ZmDwW/。在 1.3 之前，您可以使用带有
data参数的模板绑定来执行以下操作： http://jsfiddle.net/rniemeyer/sb6vD/normally you would do
itemToAdd().comment, but KO actually isn't able to write properly when the property in the data-bind is not an observable and is nested.You can certainly solve it by making
commentan observable like: http://jsfiddle.net/rniemeyer/mFkGT/. You would not need to haveitemToAddbe an observable in that case, if you didn't want it to be.Another option would be to get into the scope of
itemToAddbefore binding againstcomment. In 1.3, you could use awith: itemToAddlike: http://jsfiddle.net/rniemeyer/SDAhd/. If you don't want the extra span, then you can use a containerless binding like: http://jsfiddle.net/rniemeyer/ZmDwW/.Prior to 1.3, you could use the template binding with a
dataparameter to do something like: http://jsfiddle.net/rniemeyer/sb6vD/