Question

我想重新/重新评估自定义“模板”按钮是否应该可见。我无法弄清楚如何在不重新加载整个页面的情况下重新评估整个模型。

如果查看下面的代码，我创建了两个名为“header-button”的模板按钮。我想要实现的是创建某种方法，可以调用它来重新评估其中一个按钮的“display”属性（可能基于“id”属性？）。在我的真实页面上，我有20个按钮，或多或少都有各自的显示规则，并重新加载整个页面，使它们正确显示/隐藏似乎有点无效......

HTML：

<header-button params='title: "Resolve Case",
             buttonText: "RESOLVE",
             onclick: parent.ResolveCase,
             display: !caseIsResolved(), 
             id: "resolve"
             '></header-button>

<header-button params='title: "Resolve this case and open next case",
             buttonText: "RESOLVE & NEXT",
             onclick: parent.ResolveAndOpenNextCase,
             display: !caseIsResolved(),
             id: "update"
             '></header-button>

Javascript viewmodel：

ko.components.register('header-button', {
  viewModel: function (params) {

    this.imgSrc = ko.observable(params.src);
    this.title = ko.observable(params.title);
    this.onclick = params.onclick;
    this.background = params.background;
    this.cssClass = "clickable";
    this.buttonText = params.buttonText;
    this.display = ko.observable(true);
    this.id = "";

    if (params.buttonText == undefined || params.buttonText == 'undefined')
    { this.buttonText = ""; }

    if (params.display == undefined || params.display == 'undefined')
    { this.display = true; }
    else {
      this.display = params.display;
    }

    if (params.id != undefined && params.id != 'undefined') {
      this.id = params.id;
    }
  },
  template: '<div class="clickable toolbarContainer" style="display: inline; text-align: center; vertical-align: middle" data-bind=" attr:{id: id}, visible: display,  click: onclick">' +
    '<img data-bind=" attr:{ src: imgSrc, title: title}, style:{verticalAlign: \'bottom\', background: background, width: 16, height: 16, marginTop: 4}" ></img>' +
    '&nbsp;<span class="headerButton" data-bind=" attr:{title: title}, text: buttonText" ></span></div>'
});

$(document).ready(function () {
    ko.applyBindings();
});

Knockout js：如何重新绑定模板中的项目？

0 个答案: