1

我一直在尝试使用自定义组件和 Knockout 中的自定义绑定来呈现小型可视化。我得到了这个工作，但意识到解决方案并不理想。我的自定义绑定应该通过使用转换来处理对数据的更改。

在此处输入图像描述

如果出现一个新项目，比如说E，我希望它过渡。每次绑定更改时，我还需要更新每个圆圈周围的绿色笔划。

我的问题是，当我context在下面的代码中更新绑定时，整个绑定似乎重新初始化。我认为下面的 Knockout 正在删除之前的 DOMcontext并重新渲染整个批次 - 这会导致每个圆圈增长并触发新的项目动画。

ko.components.register("context", {
    // Assume that the view model given to us is already observable, having had a ko.mapping.fromJS() applied or similar
    viewModel: function (vm) {
        this.context = vm;
    },
    template: '<div class="card context-card" data-bind="contextViz: context">\
                <!-- ko if: context && context.types.length === 0 -->\
                    <div>Please make a selection to view contextual information here.</div>\
                <!-- /ko -->\
               </div>\
               '
});

我想知道是否有什么办法可以防止这种情况发生。本质上，我希望旧context绑定只是更新，但我不确定是否有办法这样做。

我添加了一个代码片段来说明。init called每次发生更新时都会记录这里，我只希望记录一次，并update called记录多次。

var count = 0;

ko.bindingHandlers.contextViz = {
    init: function() {
        console.log("init called");
    },
    update: function() {
        console.log("update called");
    }
};

ko.components.register("context", {
    viewModel: function (vm) {
        this.context = vm;
    },
    template: '<div class="card context-card" data-bind="contextViz: context">'
});

var vm = {
   context: ko.observable({ count: count })
};

ko.applyBindings(vm);

setInterval(function() {
  vm.context({ count: count + 1 });  
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="component: { name: 'context', params: $root.context }"></div>

4

1 回答 1

2

因为您直接使用您的context属性作为计算的 KO 将在更改params时重新渲染整个计算。context

通常的做法是传入具有某些属性的对象，params这样当该对象的属性发生更改时，组件不会完全重新渲染。

因此，您需要将您的 HTML 更改为：

<div data-bind="component: { name: 'context', params: { context: $root.context }}"></div>

在你的计算构造函数中只写：

viewModel: function (params) {
    this.context = params.context;
},


var count = 0;

ko.bindingHandlers.contextViz = {
init: function() {
    document.getElementById("log").innerHTML += "init called\n";
},
update: function(e,v) {
    console.log(ko.unwrap(v())) // make a dependency so it will be called when the bound observable changes
    document.getElementById("log").innerHTML += "update called\n";
}
};

ko.components.register("context", {
viewModel: function (params) {
    this.context = params.context;
},
template: '<div class="card context-card" data-bind="contextViz: context">'
});

var vm = {
   context: ko.observable({ count: count })
};

ko.applyBindings(vm);

setInterval(function() {
  vm.context({ count: ++count });  
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="component: { name: 'context', params: { context: $root.context }}"></div>
<div>log:</div>
<pre id="log"></pre>

于 2015-08-26T11:23:24.613 回答