2016-09-06 4 views
0

初心者をHTMLに結合します。剣道UI MVVMデータソース</p> <p>剣道データソースのみの配列を返し、私のRESTfulなAPIは、一つの要素の配列としてクライアントに返す剣道する入力要素を

ただし、クライアントの[名前]フィールドをhtml入力ボックスにバインドすることはできません。

私は 'ul'に入ればデータを消費することができます(下のコードを参照)。私はconsole.log(obj [0] .Name)ができるのでjsonの応答がうまく形成されていることを知っています。

データソースのdata:にobj [0]を返そうとしましたが、すべてが破損しました。 (アレイをスライスしようとすると、スライスエラーメッセージは表示されません)。

私は、これは簡単であると確信しているが、私はちょうどこのすべて間違って...

HTMLと以下のjsのことを考えなければなりません。

<div data-role="view" data-title="Client Detail" data-model="app.clientView"> 

<!-- this does not work --> 

<input data-bind="value: app.clientView.data"/> 
<input data-bind="value: app.clientView.data[0].Name"/> 
<input data-bind="value: app.clientView.data.Name"/> 

<!-- this works --> 

<ul data-role="listview" data-source="app.clientView.data" data-template="client-template"></ul> 

<script type="text/x-kendo-template" id="client-template"> 
    <a href="components/clientView/view.html?id=#: ID #"> 
     <div>#: Name #</div> 
     <div>#: LastActivityOn #</div> 
    </a> 
</script> 

app.clientView = kendo.observable({ 
 
    data: new kendo.data.DataSource({ 
 
     transport: { 
 
      read: { 
 
       url: app.uri + "clients/69", //+ id, 
 
       type: "get", 
 
       dataType: "json", 
 
       beforeSend: function (req) { 
 
        req.setRequestHeader('X-authKey', app.key); 
 
       } 
 
      } 
 
\t \t }, 
 
     schema: { 
 
     \t data: function (response) { 
 
      \t console.log(response); 
 
      \t var obj = $.parseJSON(response); 
 
       console.log(obj[0].Name); 
 
      \t return obj; 
 
     \t } 
 
     } 
 
    }) 
 
});

答えて

2

剣道UI MVVM valueバインド剣道のUIデータソースインスタンスを指すことはできません。 sourceバインディングだけがそれを行うことができます。

場合によっては、実装をやり直して、値バインディングに使用できる新しいフィールドをviewModel(app.clientView)に追加します。 populateこれらのフィールドはafter the DataSource instance receives its dataです。

viewModel参照をバインディング設定に含めることによって、viewModelフィールドを冗長に指定する必要はありません。そこにはフィールド名だけが必要です。 Kendo UI MVVM demosを確認してください。

+0

非常に役に立ちましたが、うまく動作しません。上の例でリストビューを削除した場合、ビューモデルのデータと見えます。スキーマ:データ。実行されることはありません。私は名前:フィールドを追加し、リストビューを持つスキーマ:データにそれをセットし、リストビューなしでは動作します。私は変更を加えました:安らかな呼び出しの成功を得るために、それは発生しません。 clientView.data.read();を手動で呼び出します。エミュレータをロックアップします。私が感じるすべてのことにもかかわらず、私は近づいています。 :P私はあなたの答えを慎重に、良いものが失われてしまいます。 – kpg

+0

剣道UIデータソースは、データバインドされたウィジェットまたは開発者によって指示されない限り、リクエストを行いません。あなたが話しているロックアップはおそらく別の問題です - JavaScriptのエラーを確認してください。 – dimodi

+0

私は残りのURLが.../clients/{id}という形式になっているので、これを回避する必要がありました。{id}は前のビューに依存しています。最高の私はURLのURLを把握することができます:トランスポートの部分は、グローバル変数IDを設定する前に、スクリプトが読み込まれると解決されます。回避策は、onShowハ​​ンドラーのビューでloadClient関数を呼び出してから、典型的なajax呼び出しを実行してからjQueryを使用してhtml要素を設定して、両方の問題を簡単で使い慣れた方法で解決することでした。私はこれを答えとして記しました。なぜなら、それは私が尋ねた質問に対する答えなのでです。 – kpg

関連する問題