Knockout.js -视图模型已定义,并且模板可以访问它,但不能使用视图模型属性的值

57hvy0tb  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(135)

好吧,我一直在修复一个项目中的一些遗留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)"成功地注销了视图模型及其所有属性。我也可以通过控制台注销特定的属性值。但是,如果我试图在ifhidden语句中使用它们,什么也不会发生。
例如,在模板中,您会注意到我试图使用if语句有条件地呈现More Info选项卡,但是if语句什么也不做。我可以成功注销shouldShowMoreInfo(),它将求值为false。我希望if语句不会将<li>作为结果呈现。此外,我试图通过data-bind="text"呈现的测试消息不起作用,但在控制台日志中可以访问testMessage
我在这里有点困惑-似乎模板可以访问视图模型,我只是不能对视图模型属性做任何事情,除了能够成功地console.log它们。

2vuwiymt

2vuwiymt1#

我认为您错过了对ko.applyBindings(viewModel[, domElement])的核心调用
其中,如果希望绑定整个dom,则第二个参数是可选的。
之所以能在控制台中获得javascript值,是因为你总是可以这样做,不仅是在使用knockout时,而且你需要实际调用绑定来 Boot 视图和视图模型之间的双向绑定。
第一个

相关问题