gpt4 book ai didi

javascript - 在 knockout js 中应用绑定(bind)后向 View 模型添加新属性

转载 作者:行者123 更新时间:2023-11-29 21:52:30 25 4
gpt4 key购买 nike

我不太擅长 knockout js,所以我可能漏掉了一些东西。

我的用例:

我有一个简单的 View 模型。我的页面看起来像这样

     <body>
<hr />
<div>
<label for="">
Basic :</label>
<input type="text" name="" data-bind="value: basic" id="txtBasic" />
</div>
<div>
<label for="">
HRA :</label>
<input type="text" name="" data-bind="value: hra" id="txtHra" />
</div>
<div>
<div style="background-color:silver;">
<hr />
<label for="">
<input type="button" data-bind="click : generateModelValue" value="Generate Runtime Property" />
<input type="button" data-bind="click : tryRebind" value="Try Rebinding with clean node" />
<br>
DA :</label>
<input type="text" name="" id="txtDa" data-bind="value: $data.da"><br><br></div>

</div>
<hr />
<div>
<label for="">
Tax :</label>
<input type="range" name="" id="rangeTax" min="0" max="30" value="0" data-bind="value: tax" />
<span id="spanTax">[Tax%]</span>
</div>
<div>
<input type="button" value="Calculate" id="btnCalculate" data-bind="click: computeSalary" />
</div>
<div>
<div id="divResult" data-bind="text: salary">
[Salary]</div>
</div>
</div>
<script>

myViewModel={
basic: ko.observable(1000),
hra: ko.observable(10),

tax: ko.observable(10),
salary: ko.observable('Yet to be calculated'),
computeSalary: function () {
this.salary(this.basic()+this.da()+this.hra());
},
generateModelValue: function () {
debugger;
this.da=ko.observable("123");
},
tryRebind: function () {
debugger;
alert("Why do i have to call this to update the view model");
ko.cleanNode($('body')[0]);
ko.applyBindings(myViewModel,$('body')[0]);
}
};

ko.applyBindings(myViewModel,$('body')[0]);


</script>
</body>

我想在运行时添加一个属性(在本例中为“da”)。因此,为了使示例易于阅读,我将在我的模型上调用“generateModelValue”函数,该函数将添加“myViewModel”上的“da”属性,示例值为“123”。

这成功地创建了一个新的可观察属性(我检查了 console.log)。 但不更新 UI

所以在这次点击之后,我在我的 View 模型上调用了另一个函数,它会尝试执行一个 ko.cleanNode($('body')[0]) 然后是一个 ko .applyBindings(myViewModel,$('body')[0]); 然后更新 UI。


我的问题:

我是否必须调用清理节点,或者有一些更好的方法可以在 View 模型更新后立即更新 UI?

我的疑问:

  1. 我不认为使用干净节点是实现此目标的好方法?
  2. 如果对象太复杂或太大,是否会导致任何性能问题。
  3. 我正在使用 "<input type="text" name="" id="txtDa" data-bind="value: $data.da">"在我的 HTML 中(这样当我使用 viewModel 中不可用的属性调用 applyBinding 时不会抛出未定义的错误)
    $data 真的需要(还有其他选择吗?)

访问过的帖子: Adding properties to the view model created by using the Knockout JS mapping plugin
(我不太确定我理解这篇文章。如果推荐的话会再看一遍,因为我也使用映射插件将纯 json 响应从 AJAX 调用转换为可观察 View 模型,但我的实现有点不同)

实时 Plunker : http://plnkr.co/edit/4EwSdKihVak1dGhuobbi?p=preview


已编辑:
为什么我需要实现这个 -

因为在我调用 ko.applybinding 时,我的 viewModel 总是小于我的 HTML 标记中所需的数据绑定(bind)属性,因此会抛出未定义的错误(我使用了 $data以避免此错误)。

因此,将在 ko.applyBinding(html-element) 中传递的最终 html View 将是构成屏幕的几个较小 html 片段的 UNION。

并且在调用应用绑定(bind)时不可能收集所有 View 模型属性,因为 View 模型的复杂性会随着用户交互(Ajax 调用)而增加

我希望它清楚。如果没有,我正在为此创建一个 plunkr。会很快更新。

已更新
新朋克 http://plnkr.co/edit/8PNHk25jl2xig0GLyqQq?p=preview

在上面的 plunkr 部分带有

<div data-bind="visible: $data.da">
You will see this section only if the da property is available on the view model
</div>

将在应用绑定(bind)时存在于 DOM 中,但“da”的值将不存在。在一些用户交互之后, View 模型将被更新,因为该对象将通过 ajax 调用接收新属性(例如上面 plunkr 中的 da)。因此将显示 da 部分。

最佳答案

我认为您误解了 knockout 的运作方式。在某些情况下,例如动态列表等,并非所有可观察对象都会立即可用。但是,您的可观察对象只是模型的一个属性。这个 observable 应该与 basichra 一起创建。延迟它的创建没有任何好处。

将您的代码更改为:

myViewModel = {
basic: ko.observable(1000),
hra: ko.observable(10),
da: ko.observable(null),

如果您想表示在函数 generateModeValue 之前尚未设置该值,则让 null 表示此值或创建另一个函数可以设置的 bool 可观察值。例如:

myViewModel = {
basic: ko.observable(1000),
hra: ko.observable(10),
da: ko.observable(null),
daIsSet: ko.observable(false),
...
generateModelValue: function () {
debugger;
this.da("123");
this.daIsSet(true);
},
...

同样,可以动态添加可观察对象(使用数组或其他一些方法),但这种情况不需要那种功能。希望这能帮助您理清一些概念。

关于javascript - 在 knockout js 中应用绑定(bind)后向 View 模型添加新属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28345940/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com