淘汰赛计算绑定不更新模板名称

Question

我正在从 JQuery 绑定转移到 Knockout，以使 UI 与数据的同步更容易。我对淘汰赛相当陌生，但为了保持整洁，我正在使用 Requirejs 淘汰赛。

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

switchInPrintList 更改 inPrintList 可观察对象，更改后 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);
}