Question

我从JQuery绑定转移到Knockout，以便更轻松地与数据进行UI同步。我是淘汰赛的新手，但为了保持整洁，我在需要时使用淘汰赛。

因此，在我的一个模块中，我尝试使用模板来更改信息栏并将模板名称绑定到计算的observable。但是计算出的observable并没有更新UI中的模板名称。

<div data-bind="template: { name: baseData.printListTemplate }"></div>

<script type="text/html" id="inPrintList">
    <span>
        <span>In </span>
        <a href="#" class="managePrintList">Print List</a>
    </span>

    <a href="#" data-bind="click: switchInPrintList">sw</a>
</script>

<script type="text/html" id="notInPrintList">
    <span>
        <span>Add to </span>
        <a href="#" class="managePrintList">Print List</a>
    </span>

    <a href="#" data-bind="click: switchInPrintList">sw</a>
</script>

上面是我的html代码和Knockout模板。

以下代码是我的Knockout模块

在baseData中，我有printListTemplate计算的observable，返回用于打印列表指示符的templatename。

switchInPrintList更改inPrintList observable，并在更改ko.computed函数运行后返回正确的字符串，但在此之后UI不会更新。

define(['knockout', 'Modules/utils', 'Modules/Shared/kodialog'],
    function (ko, utils, kodialog) {

        var baseData = function (data) {
            var self = this;

            self.inPrintList = ko.observable(false);

            ko.mapping.fromJS(data, {}, self);

            self.printListTemplate = ko.computed(function () {
                if (self.inPrintList())
                    return "inPrintList";
                else
                    return "notInPrintList";
            }, this);
        }

        var baseDataMapping = {
            create: function (options) {
                return new baseData(options.data);
            }
        }

        return function player() {
            var self = this;

            var utils = new utils();

            self.baseData = new baseData();

            self.dialog = new kodialog();

            self.renderMP = function (contentId) {
                self.dialog.openDialog();
                $.ajax({
                    type: "GET",
                    url: "/Home/mpdata",
                    dataType: 'json',
                    crossDomain: true,
                    data: { contentid: contentId },
                    success: function (jsonResult) {
                        self.baseData = ko.mapping.fromJS(jsonResult, baseDataMapping);
                        self.dialog.rendered(true);
                    }
                });
            }
            self.switchInPrintList = function () {
                if (self.baseData.inPrintList())
                    self.baseData.inPrintList(false);
                else
                    self.baseData.inPrintList(true);
            }
        }
    });

Answer 1

我认为问题在于，当您只需要相应地更新其属性时，您将在成功回调中重新分配baseData。对于这种情况，有ko.mapping.fromJS()方法的另一个重载，它将第三个参数作为更新目标，应该更新属性。请参阅documentation，“指定更新目标”。

所以尝试重写你的成功回调：

success: function (jsonResult) {
    ko.mapping.fromJS(jsonResult, baseDataMapping, self.baseData);
    self.dialog.rendered(true);
}

Knockout计算绑定不更新模板名称

1 个答案: