2013-10-07 40 views
0

使用knockout.js我剛開始和我收到了良好的效果,但我有一個小問題上有兩個跨度領域:試圖串聯使用Knockoutjs

我有一個列表,在JSON,我使用打造我的模板:

以下是列表和代碼制定名單:

public IEnumerable<dynamic> TheaterList { get; set; } 
     List<TheaterTest> theaters = new List<TheaterTest>(); 

     protected void Page_Load(object sender, EventArgs e) 
     { 
      if (IsPostBack) 
      { 
       getTheaters(); 
       TheaterList = theaters; 
      } 

     } 

     protected void getTheaters() 
     { 
      theaters.Add(new TheaterTest() 
      { 
       theater_dist = "3", 
       theater_name = "Regal Webster Place 11", 
       theater_add1 = "1471 W. Webster Ave", 
       theater_add2 = "", 
       theater_city = "Chicago", 
       theater_state = "Il", 
       theater_postcode = "60614", 
       theater_phone = "(762) 711-9180" 
      }); 

      theaters.Add(new TheaterTest() 
      { 
       theater_dist = "4.2", 
       theater_name = "Regal Washington Park 9", 
       theater_add1 = "1341 W Webster Ave", 
       theater_add2 = "", 
       theater_city = "Chicago", 
       theater_state = "Il", 
       theater_postcode = "60614", 
       theater_phone = "(762) 711-9180" 
      }); 

這是構建JSON代碼中的.ascx

<script> 
    var d = {}; 
    d.theaterList = <%= Newtonsoft.Json.JsonConvert.SerializeObject(TheaterList) %> ; 
    $(document).ready(function() { 

     ko.applyBindings(new theaterSel.TheaterModel(d.theaterList)); 

    }); 
</script> 

,這裏是我的模板:

<div class="theatre-info"> 
      <div class="theater-name"> 

       <a data-bind="attr: { href: ''}"><span class="theater-link" data-bind=" text: theater_name" /></a> 

      </div> 
      <div class="theatre-address" data-bind="text: theater_add1, text: theater_add2"></div> 
      <div class="theatre-address" data-bind="text: theater_city + text: theater_state + text: theater_postcode"></div> 
      <div class="theatre-phone" data-bind="text: theater_phone"></div> 
      <button>My Theatre</button> 
     </div> 
    </li> 

我想連接theater_city,theater_state和theater_postcode:我想我可以用「ko.compute ......但我只是不能確定如何創建功能。 任何幫助,將不勝感激。

預先感謝您。

回答

2

是的,你是在正確的軌道上 -

在您的視圖模型

var computedName = ko.computed(function() { 
    return theater_city + ', ' + theater_state + ', ' + theater_postcode; 
}); 

,並在您的視圖

<h1 data-bind="text: computedName"></h1> 
+0

太感謝你了,這是我的想法,但我不知道函數如何知道這些值,因爲它們來自JSON列表。我實際上就是這樣編碼的。我只需要保證。非常感謝!! –