動態調用上孩子的函數在knockout.js ATTR SRC

我想呼籲ATTR src，卻沒有一個功能。這是我嘗試過的。動態調用上孩子的函數在knockout.js ATTR SRC

function FavoriteViewModel() { 
    var self = this 

    self.FavoriteProfiles = ko.observableArray([]) 

    self.getRating = function(Rating){ 
     //here i want conditions and concat image path 
     return does nothing here 
    } 

    self.LoadData = function(){ 
     //run ajax and put its result in self.FavoriteProfiles 
     self.FavoriteProfiles(Result) 
    } 

    self.LoadData() 
}

當我運行AJAX這帶來了這樣的結果。結果是多，我只是張貼單個對象瞭解

ProfileId 20 
Age   21 
Gender  "F" 
Rating  4

和IM這樣

<div id="favorite-related-profiles" data-bind="foreach:FavoriteProfiles"> 
<article class="prfl_box"> 
    <p> 
     <span id="favorite-related-age" data-bind="text:Age"></span>    
     <span id="favorite-related-gender" data-bind="text:Gender"></span>    
     <br> 
     <img id="favorite-related-rating" class="pro_rating" src="" data-bind="attr:{src:Rating}"> 
    </p> 
</article> 
</div>

數據綁定當我嘗試這種結合這樣

<img id="favorite-related-rating" class="pro_rating" src="" data-bind="attr:{src:$root.getRating.bind($data,Rating)}">

我在SRC得到這個

src="function() { [native code] }"

如何動態生成src屬性。
注意我需要顯示的圖像。圖像被命名爲4rating.png，5rating.png，爲Default.png。我要檢查，如果評級是在src屬性4 assing 4rating。我怎樣才能做到這一點。

來源

2013-10-11 raheel shan

退房計算觀察到http://knockoutjs.com/documentation/computedObservables.html – Anders

好的去除綁定，他們的辦法很少這樣做。現在，如果我已經理解了您的問題，那麼您需要將src屬性分別設置爲4rating.png,5rating.png等等，具體取決於Rating值分別爲4,5。

如果是這種情況的瞭解這一DEMO - A dirty way

現在，讓我們把它用作每個代碼： -

你可以看看DEMO2- Proper way。如果你檢查元素，並看到yopu'll找到HTML標記如下： -

<td data-bind="attr:{src: $root.getRating($data)}" src="4rating.png"> 
      </td>

希望它有幫助。

編輯： -

只是一個建議，當您使用淘汰賽型號的，那麼你可以讓你的模型獨立。保持你的流程簡單，它會更具可擴展性。我會分享我如何使用揭示模塊模式學習敲除代碼DEMO。

創建您的視圖模型像這樣簡單： -

function FavoriteViewModel(data) { 
    var self = this 

    self.ProfileId = data.ProfileId;//Do some exception handling 
    self.Age = data.Age;//Do some exception handling 
    self.Gender = data.Gender;//Do some exception handling 
    self.Rating = data.Rating;//Do some exception handling 
    self.RatingExtended = data.Rating + "rating.png"; //Some random stuff 

}

創建一個變量，將保留您最喜歡的陣列，將是data-bind到HTML。

var FavoriteProfiles = ko.observableArray([]);

最後，AJAX調用來獲取數據，並將其分配給您的FavoriteProfiles。

var ajaxdata = DummyAjaxCall(); //get all profiles 

     $.each(ajaxdata, function (index, value) { 
      FavoriteProfiles.push(new FavoriteViewModel(value)); //Create a Model 
     });

來源

2013-10-11 10:27:47 Shubh

感謝您的回答，它確實有幫助。在你的答案之前我發現[這個] alos（http://stackoverflow.com/questions/13154329/binding-image-src-as-expression-in-knockout） –

你發佈的最後一個例子我已經試過了。而不是在擴展評級中進行調整，我使用了計算可觀察性，但它不起作用。 –

@raheelshan它應該爲你工作，只是爲了交叉驗證[演示3與計算觀測]（http://jsfiddle.net/shubh0602/K5sKc/17/）:) – Shubh

數據綁定更改爲：

data-bind="attr:{src:$root.getRating.bind($data,Rating)}"

所有這一切已經改變我從周圍的函數調用，因爲這樣做的話，你可以在src基本設置功能作爲一個字符串所採取的''。

編輯：嘗試在功能

data-bind="attr:{src:$root.getRating($data,Rating)}"

來源

2013-10-11 08:06:08 Thewads

謝謝，我已經嘗試過，但無法運作。但順便問一下你有沒有測試過，它工作？ –

我還沒有試過你的例子，但這是正確的做法。調試你的代碼時，getRating函數實際上會受到影響嗎？ – Thewads

動態調用上孩子的函數在knockout.js ATTR SRC

回答

相關問題