0

助けが必要です。オブジェクトを返すアクションがあります (JSON 形式、このアプローチを使用します: "http://code.msdn.microsoft.com/Build-truly-RESTful-API-194a6253")。アクションからの戻り (DashboardController のインデックス) : 

   var model = new DashboardHomeModel()
        {                
            CurrentCompaigns = .....................,
            BuzzLeaderCompaigns = ..................,            
            BuzzCompaignByInterest =  ..................
        };
    return View(model);

最初に、モデルの BuzzLeaderCompaigns (Compaign の ICollection) を表示したいと思います。これが私のビューです。

               <h3>My Compaign</h3>
       <table>
            <thead>
                  <tr>
                   <th>Compaign Name</th><th>Compaign Description</th><th>End Date</th>
                 </tr>
            </thead>
           <tbody data-bind="foreach: BuzzLeaderCompaigns">
             <tr>
               <td data-bind="text: Name" ></td>            
                <td data-bind="text: Description"></td>
                <td data-bind="text: EndDate"></td>
              </tr>       
          </tbody>
       </table>

 <script type="text/javascript">
      function Compaign(data) {
           this.BuzzCompaignId = ko.observable(data.BuzzCompaignId);
           this.Name = ko.observable(data.Name);
           this.Description = ko.observable(data.Description);
           this.EndDate = ko.observable(data.EndDate);
      }

      function DashboardViewModel() {
           var self = this;
           self.BuzzLeaderCompaigns = ko.observableArray([]);      
           self.CurrentCompaigns = ko.observableArray([]);
           self.BuzzCompaignByInterest = ko.observableArray([]);
        // Load initial state from server, convert it to Task instances, then populate self.tasks
        $.getJSON("/Dashboard/Index", function (Data) {
              var mappedData = $.map(Data, function() { return   } ) ;
      });

      } 
     ko.applyBindings(new DashboardViewModel());

    </script>

データをビューモデル ($.getJSON でデータを取得するとき) にバインドしてからビューにバインドするにはどうすればよいですか?

4

3 に答える 3

1

/Dashboard/Index が CurrentCompaigns を返すと仮定して、これを変更します。

$.getJSON("/Dashboard/Index", function (Data) {
    var mappedData = $.map(Data, function() { return   } ) ;
});

これに：

$.getJSON("/Dashboard/Index", function (Data) {
    var mappedData = $.map(Data, function(item) { return new Compaign(item) });
    self.CurrentCompaigns(mappedData);
});

ただし、Arbiter のアドバイスを考慮する必要があります。/Dashboard/Index は、JSON アクション メソッドではなく、ビューを返す必要があるアクション メソッドのように聞こえます。3 つの observableArray に対して 3 つの個別の JSON メソッドを使用するか、すべての "Compaigns" を返す単一のメソッドを使用してから、ko.utils.arrayFilter を使用してフィルタリングし、3 つの配列に値を割り当てることができます。

于 2012-07-27T17:01:48.280 に答える
0

サーバー側のコードを使用して、ビューモデルをJson文字列に直接変換することもできます。

 <script type="text/javascript">    
        // this example is using Json.Net  
        var model = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model, new Newtonsoft.Json.Converters.IsoDateTimeConverter()));
        // wrapper contains additional methods and logic 
        // knockout mapping plugin is used to convert json objects to observable objects
        var wrapper = new ViewModelWrapper(ko.mapping.fromJS(model));           
        ko.applyBindings(wrapper);
  </script>
于 2012-07-17T13:18:27.137 に答える
0

あなたを正しい軌道に乗せるためのいくつかのこと：

  • ビュー (cshtml) が "Index" と呼ばれる場合、コントローラーで別のアクションを作成して、json を返す必要があります。
  • 戻る代わりにView(model);、新しいアクションを返しJson(model, JsonRequestBehavior.AllowGet);て、アクションが (HTML ではなく) JSON を返すようにする必要があります。既存のアクション (インデックス) は、モデルのないビューを返す必要があります。return View();

  • getJSON新しいパスを使用するようにパスを変更します。つまり、次のようになります。

    $.getJSON("/Dashboard/GetCampaign", function (Data) { ビューモデル に入力するコード );

于 2012-07-17T12:57:39.460 に答える