如何創建一個複合屬性並在jQuery模板中使用它？

我希望能夠創建一個JS對象，該對象具有將對象中的現有字段組合在一起的字段，但是我認爲對於「this」我有一個上下文問題，我不知道如何解決。如何創建一個複合屬性並在jQuery模板中使用它？

這裏就是我想要做的事：

function Person(firstName, lastName) 
{ 
    this.FirstName = firstName; 
    this.LastName = lastName; 

    this.FullName = function() 
    { 
     return this.FirstName + " " + this.LastName; 
    } 
}

我希望用全名是一個jQuery模板，但還沒有運氣。

<script type="text/x-jquery-tmpl" id="tmplImg"> 
    {{each people}} 
     <li> 
      ${FullName} 
     </li> 
    {{/each}} 
</script>

我覺得能以某種方式，因爲knockout.js庫是能夠以某種方式實現它，如在本教程（第4步）來完成。

http://learn.knockoutjs.com/#/?tutorial=templates

來源

2011-09-06 C.J.

Working Demo：

function Person(firstName, lastName) { 
    this.FirstName = firstName; 
    this.LastName = lastName; 
    var self = this; 
    this.FullName = function() { 
     return self.FirstName + ' ' + self.LastName; 
    } 
}

來源

2011-09-06 17:15:18 Joe

我需要它是一個函數，以便它使用電流值。我知道這是可能的，因爲knockout.js庫能夠以某種方式完成此操作。 –

聰明。是的，這很有用，謝謝！ 1問題。你不能刪除內部函數，並且在定義自己之後立即執行return語句嗎？ –

是的，我想我是在想這個問題。 – Joe

使用你的腳本，我已經能夠叫全名和檢索全名：

var pers = new Person("first", "last"); 
alert(pers.FullName());

這就是你試圖完成？

來源

2011-09-06 17:19:29 Prusprus

不完全是，我試圖使用jQuery的模板引擎：jquery-tmpl.js和模板中我希望使用像FullName這樣的東西。我的真實例子有點複雜，但這表明了這個想法。 –

我絕不jQuery的模板的專家，但這部作品在我的測試：

<script id="myTemplate" type="text/x-jquery-tmpl"> 
    ${$data.getFullName()} 
</script> 

function Person(firstName, lastName) { 
    this.firstName = firstName; 
    this.lastName = lastName; 
} 

Person.prototype.getFullName = function() { 
    return this.firstName + " " + this.lastName; 
}; 

var person = new Person("John", "Doe"); 

$("#myTemplate").tmpl(person).appendTo("#myOutput");

來源

2011-09-06 18:07:19 Jeremy

IAbstractDownvoteFactory的回答是一個堅實的答案，肯定值得一給予好評，但我只是想介紹一個超出了他/她的回答抽象層：

考慮下面的幫助：

function createBoundMethodsFor(obj) { 
    var proto = obj.constructor.prototype 
    for(var method in proto) 
     if(typeof(proto[method]) === 'function') 
      obj[method] = function() { return proto[method].apply(obj, arguments); } 
}

然後讓我們看看構造函數的人再次：

function Person(firstName, lastName) { 
    this.FirstName = firstName; 
    this.LastName = lastName; 

    createBoundMethodsFor(this) 
} 

Person.prototype.FullName = function() { 
    return this.FirstName + ' ' + this.LastName; 
}

這個輔助循環遍歷所有對象的prototype的functions，並建立爲每一個綁定的封鎖，並覆蓋它們作爲實例方法，但通過對原型方法，他們只是代理。使用這樣的助手可能會讓你的生活變得更容易，因爲對象上的方法數量變得不重要。

但要注意，綁定方法類似這樣的結果會很有趣，你可能不會想到，例如：

var john = new Person("John", "Doe") 
var jane = new Person("Jane", "Doe") 
var bound = john.FullName 

bound() // John Doe 
bound.call(jane) // John Doe (Not Jane like you might expect) 

var unbound = john.constructor.prototype.FullName; 
unbound() // null 
unbound.call(john) // John Doe 
unbound.call(jane) // Jane Doe

Fiddle Here

來源

2011-09-06 18:52:10

如何創建一個複合屬性並在jQuery模板中使用它？

回答

相關問題