KnockoutJS数据更新将内部函数写入UI [英] KnockoutJS data update writes internal function to UI

问题描述

我更新视图模型时遇到了一个奇怪的问题...基本上每次更新时，每个可观察对象似乎都有包含此数据的随机机会:

I'm having this odd issue when I update my viewmodel...basically with every update, there appears to be a random chance that each observable will contain this data:

function observable() {    
        if (arguments.length > 0) {    
            // Write               

            // Ignore writes if the value hasn't changed    
            if ((!observable['equalityComparer']) || !observable['equalityComparer'](_latestValue, arguments[0])) {    
                observable.valueWillMutate();    
                _latestValue = arguments[0];    
                observable.valueHasMutated();    
            }

            return this; // Permits chained assignments    
        } else {    
            // Read    
            ko.dependencyDetection.registerDependency(observable); // The caller only needs to be notified of changes if they did a "read" operation

            return _latestValue;
        }    
    }

我已经使用KnockoutJS已有一段时间了，但是我从未见过这样的事情.我的猜测是它与我的模板绑定有关，但是我不确定.我将对此进行深入研究，但是我认为我会将其发布在这里，以防其他任何人遇到此问题或有解决方案.就像我说的那样，它并不会始终如一地发生.

I've been using KnockoutJS for a while, and I've never seen anything like this. My guess is that it has something to do with my template binding, but I'm really not sure. I'm going to dig into it, but I figured I'd post it here in case anyone else is having this issue, or has a solution. Like I said, it doesn't happen consistently, only on occasion.

////更多信息////

因此，马特(Matt)在下面引用了此问题(http://stackoverflow.com/questions/9763211/option-text-becomes-a-function-string-after-updated-with-fromjs)，这大致是相同的问题.唯一的不同是，我以这种样式使用本机模板绑定:

So Matt below referenced this (http://stackoverflow.com/questions/9763211/option-text-becomes-a-function-string-after-updated-with-fromjs), which is roughly the same issue. The only difference is that I'm using the native template binding in a style like this:

<div data-bind="template: {name: 'issueTemplate', data: incidents}"></div>

<script id="dashboardIssueTemplate" type="text/html">       
    <!--ko foreach: $data-->    
    <div data-bind="text: title"></div>
</script>

我假设当您将observableArray传递到模板绑定程序时，KnockoutJS会自行处理展开.我知道在这个例子中我不能说"title()"，因为那不存在.我应该绑定$ root.title()这样的命令吗?

It was my assumption that KnockoutJS handled the unwrapping by itself when you pass the observableArray into the template binder. I know I can't say "title()" in this example, because that doesn't exist. Am I supposed to be binding with a command like $root.title()?

////甚至更多信息////

似乎此问题是由于一页上有两个"applyBindings"而导致的.我的应用程序包含一个外部小部件，该小部件在运行时将其DOM添加到主机页面DOM中.该小部件正在使用ko.applyBindings(vm，ROOTNODE)语法，该语法应允许主机页面运行它自己的ko.applyBindings(hostVm).

It appears that this problem occurs as a result of having two "applyBindings" on one page. My application contains an external widget which adds it's DOM to the host page DOM at runtime. That widget is using the ko.applyBindings(vm, ROOTNODE) syntax which should allow for the host page to run it's own ko.applyBindings(hostVm).

事实上，它确实可以，并且每次刷新都可以正常工作.但是问题是当宿主页面不刷新而没有更新viewModel时. UI渲染以某种方式在每个数据绑定节点上吐出此内部功能.我已经通过KnockoutJS进行了调试，并实际上确认viewModel和rootNode是正确的...实际绑定之外的东西正在接管.

In fact, it does, and it works correctly every refresh. The problem however is when the host page does a viewModel update with no refresh. Somehow, the UI rendering spits out this internal function on EVERY data-bound node. I've debugged through KnockoutJS and actually confirmed that the viewModel and rootNode are correct...something outside of the actual binding is taking over.

推荐答案

这与附加到模板中数据对象上的()"有关.我发现的是，在第一个渲染(页面加载)过程中，像这样编写模板:

This has something to do with the "()" appended onto the data object in the template. What I've found is that during the first render (page load) writing the template like this:

<div data-bind="template: {name: 'issueTemplate', data: incidents}"></div>

<script id="dashboardIssueTemplate" type="text/html">       
    <div data-bind="text: title"></div>
</script>

工作正常.但是，一旦在observableArray上运行更新，我的"title"对象即成为该函数.如果我使用以下样式编写模板:

works just fine. However, once you run the update on the observableArray my "title" object becomes that function. If I write the template using this style:

<div data-bind="text: title()"></div>

它似乎可以在每次更新中使用.

It seems to work on every update.

我不确定为什么这是解决方案.从外观上看，传递给Knockout绑定程序的数据对象在页面加载和更新上完全相同.我会将其发布为答案，但是直到我理解为什么会发生，我才将其标记为答案.

I am not certain why this is the solution. From the looks of it, the data object being passed to the Knockout binder is the exact same on both page load and update. I'll post this as an answer, but I'm not marking it as an answer until I understand why this is happening.

这篇关于KnockoutJS数据更新将内部函数写入UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！