javascript - knockout 计算绑定(bind)不更新模板名称

Question

我正在从 JQuery 绑定(bind)转向 Knockout，以使 UI 与数据同步更容易。我对 knockout 还很陌生，但为了保持整洁，我将 knockout 与 Requirejs 结合使用。

因此，在我的一个模块中，我尝试使用模板来更改信息栏并将模板名称绑定(bind)到计算的可观察值。但计算出的可观察量并未更新 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计算的可观察值，返回用于打印列表指示器的模板名称。

switchInPrintList 更改了 inPrintList 可观察值，更改后 ko.compulated 函数运行并返回正确的字符串，但 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);
}