第一个:是的,这是可能的,而且很可能您不需要更改太多代码。但是,为了适应 KnockoutJS 中更好的架构,您可能还是想这样做。它不仅适用于 KO,而且是一种更易于维护的更好的设计模式。
例如,这个
<!-- ko if: GetFirstWord(ProductName) == "Premier" -->
具有相同的功能
<!-- ko if: currentWordisPremier -->
在你的代码中你有类似的东西
self.currentWord = ko.observable("");
self.currentWordisPremier = ko.observable(false);
self.currentWord.subscribe(function(newCurrentWord){
if(newCurrentWord === "Premier") self.currentWordisPremier(true);
});
(这是一个简单的示例,您可以通过动态模板以更具可扩展性的方式设计您的代码)
第二个:是的,但仅从 2.1 版开始通过$index
关键字。您可以在此处阅读有关讨论的更多信息,并在此处阅读一些文档。
与第一点一样,您可能希望更改一些 javascript 代码以不为模板提供太多逻辑。
{{each(i, d) Benefits}}
<div class="{{if i%2==0}}even{{else}}odd{{/if}}">
{{/each}}
在原生 KnockoutJS 模板中
<!-- ko foreach:Benefits -->
<!-- ko if: $index %2 == 0 -->
<div class="even"> ... </div>
<!-- /ko -->
<!-- ko ifnot: $index % 2 == 0 -->
<div class="odd"> ... </div>
<!-- /ko -->
<!-- /ko -->
更好的方法可能是
<!-- ko foreach:Benefits -->
<div data-binding="css: {"even" isEven, "odd": isOdd}"> ... </div>
<!-- /ko -->
你在你的 js 中执行逻辑,可能只为你的数组执行一次。
var index = 0;
var updatedBenefits = ko.utils.arrayForEach(self.Benefits(), function(benefit) {
var property = index++ %2 == 0 ? "isEven" : "isOdd";
return benefit[property] = true;
});
self.Benefits(updatedBenefits)