如何在knockout.js中實現可計算的觀察值

我想添加一些方法。並且this指令不能幫助我。如何在knockout.js中實現可計算的觀察值

var viewModel = function() { 
    firstName = ko.observable("Mike"); 
    lastName = ko.observable("Rassel") 
    //fullName = ko.computed(function() { 
     //return firstName() + " " + lastName(); }, viewModel); 
} 

viewModel.fullName = ko.computed(function() { 
    return this.firstName() + " " + this.lastName(); }, viewModel);

DEMO：http://jsfiddle.net/gJUqK/

在當地與2.1.0的工作。

來源

2012-05-17 FreeVice

firstName,lastName和fullName應該是myViewModel實例的屬性。

這將起作用，如the documentation中所述。 self被添加，因爲在fullName裏面可觀察的回調函數this會指向別的東西。

function myViewModel() 
{ 
    var self = this; 

    this.firstName = ko.observable("Mike"); 
    this.lastName = ko.observable("Rassel"); 

    this.fullName = ko.computed(function() { 
     return self.firstName() + ' ' + self.lastName(); 
    }) 
} 

ko.applyBindings(new myViewModel());

在這裏工作：http://jsfiddle.net/gJUqK/1/

來源

2012-05-17 15:53:30

這不是外面 – FreeVice

@FreeVice什麼不是外面？我沒有跟隨。 –

抱歉，有人編輯我的問題到無法識別 – FreeVice

問題的一部分是，與您撥打viewModel,this的方式綁定到fullName函數的全局對象。

你可以開始通過使viewModel一個構造函數和添加fullName到它的原型來糾正這一點：

var ViewModel = function() { 
    this.firstName = "Mike"; 
    this.lastName = "Rassel"; 
} 

ViewModel.prototype.fullName = function() { 
    return this.firstName + " " + this.lastName; 
}; 

var view = new ViewModel(); // Call ViewModel with new 
console.log(view.fullName()); // Prints "Mike Rassel"

我不明白淘汰賽的東西，但希望這應該讓你更接近的解決方案。

來源

2012-05-17 15:42:38

你的建議將幫助。 Hovewer原型並不是解決這些問題的常用工具。主要原因 - 來自View的參照功能可能會丟失。 'var self = this;'並使用'self'代替'this'是更常見的解決方案 – Romanych

@Romanych我假設你指的是@ Jack的答案類似的模式，我認爲這是相當常見的地方。原型路線的一個優點是，IF fullName是一個函數，而不是函數的輸出（我說「如果」，因爲我不確定knockout.js在這裏做了什麼），然後將它添加到原型可以減少內存用法，因爲'ViewModel'的所有實例都將共享單個聲明。在對象本身中定義它並使用'self'來引用對象意味着每個實例都有自己的'fullName'定義。 –

fullName必須是一個'ko.computed'才能使綁定工作，並且跟蹤其他事物的依賴屬性。 –

如何在knockout.js中實現可計算的觀察值

回答

相關問題