好吧,我一直在修复一个项目中的一些遗留bug,它使用的是Knockout.js。我对这个库非常不熟悉,所以请原谅我的无知。
我有一个对话框模板,其中包含以下HTML块:
<ul class="nav">
<li class="active">
<a href="#add" data-toggle="tab">Add New</a>
</li>
<li>
<a href="#chooseExisting" data-toggle="tab" data-bind="text: console.log($data)"></a>
</li>
<!-- ko if: shouldShowMoreInfo() -->
<li data-bind="text: console.log(shouldShowMoreInfo())">More Info</li>
<!-- /ko -->
// using this as a test
<li data-bind="text: testMessage()"></li>
</ul>
这是视图模型:
var viewModel = {
tabs: ko.observableArray([
{
name: "Add New",
value: '[href="#add"]'
},
{
name: "Choose Existing",
value: '[href="#chooseExisting"]'
},
]),
activeTab: ko.observable(),
shouldShowMoreInfo: ko.observable(),
testMessage: ko.observable()
};
viewModel.activeTab(viewModel.tabs()[0].value);
viewModel.shouldShowMoreInfo(false);
viewModel.testMessage('test message');
return viewModel;
问题是,模板中的data-bind="text: console.log($data)"
成功地注销了视图模型及其所有属性。我也可以通过控制台注销特定的属性值。但是,如果我试图在if
或hidden
语句中使用它们,什么也不会发生。
例如,在模板中,您会注意到我试图使用if
语句有条件地呈现More Info
选项卡,但是if
语句什么也不做。我可以成功注销shouldShowMoreInfo()
,它将求值为false
。我希望if
语句不会将<li>
作为结果呈现。此外,我试图通过data-bind="text"
呈现的测试消息不起作用,但在控制台日志中可以访问testMessage
。
我在这里有点困惑-似乎模板可以访问视图模型,我只是不能对视图模型属性做任何事情,除了能够成功地console.log
它们。
1条答案
按热度按时间2vuwiymt1#
我认为您错过了对
ko.applyBindings(viewModel[, domElement])
的核心调用其中,如果希望绑定整个dom,则第二个参数是可选的。
之所以能在控制台中获得javascript值,是因为你总是可以这样做,不仅是在使用knockout时,而且你需要实际调用绑定来 Boot 视图和视图模型之间的双向绑定。
第一个