asp.netのAJAX 4.0クライアントテンプレートは、どのように選択をバインドするには？

StackOverflow https://stackoverflow.com/questions/1500942

質問

私は私が他で入力に基づいて直接計算他人の列を追加し、行を削除しても、列の一部を編集して持つことができ、簡単なAjaxのグリッドを作成しようとしています。私は、これはasp.netのAJAX 4.0とクライアントテンプレートと遊ぶのに良いoppurtunityだろうと思いました。それはかなりOK動作しますが、私は私にJSONデータをバインドする方法を見つけるように見えることはできません。私はこれを行うことができますどのように？

通常のテンプレートは次のようになります。

<div id="authorsTemplate" style="visibility:hidden;display:none;"> 
    <ul> 
        <li>First Name: {{ FirstName }}</li> 
        <li>Last Name: {{LastName}}</li> 
        <li>Url: <a href="{{Url}}">{{Url}}</a></li> 
    </ul> 
</div>

どのように私はドロップダウンでデータバインド構文を使用します。

<select id="">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

編集： selectタグが値を持っていた場合は明白な解決策は次のようになり属性。 EDIT2： 以下の構文は、実際に私は選択が実際にvalue属性を持っています。

わからなかった解決策、ThxをRoatin、でした 
<select id="" value="{binding nr}">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

私は多分、選択オプションを設定するには、カスタムのJavaScriptを使用することができますが、ポイントは私のJSONへの結合のライブは、あなたが入力タグ

の値にバインドするのと同じ方法をオブジェクトです
役に立ちましたか？

解決

  

私はドロップダウンを移入したくない、それがすでに取り込まれています。私はJSONオブジェクトから値を取得するための構文を結合クライアントテンプレートを使用できるようにしたいと、選択した要素を設定します。

実際には、selectのDOM要素はを行うのvalueプロパティを持っている（ただし、マークアップ内の属性として公開されていません）。それは子<option>sを反復して、一致するselectedIndexを持つオプションの見つかったオプションのインデックスにvalueを設定するのと同じ（とより速い）で設定します。

とにかく、ここでSys.Binding（完全なテストケース）で直接にバインドする方法は次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">.sys-template {display:none}</style>
    <script src="MicrosoftAjax.debug.js"></script>
    <script src="MicrosoftAjaxTemplates.debug.js"></script>

    <script type="text/javascript">
    var dataItem = { Foo: '3' };
    function pageLoad()
    {
        $create(Sys.Binding, {
            target: $get("list"),
            targetProperty: 'value',
            source: dataItem,
            path: 'Foo',
            mode: Sys.BindingMode.twoWay
        });
    }
    </script>
</head>
<body>
  <select id="list">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</body>
</html>
ご希望の場合は、

ここでは、宣言的に同じことを行う方法です。

<body xmlns:sys="javascript:Sys"
      xmlns:binding="javascript:Sys.Binding"
      sys:activate="*">

  <select id="list"
    sys:attach="binding"
    binding:target="{{ $get('list') }}"
    binding:targetproperty="value"
    binding:source="{{ dataItem }}"
    binding:path="Foo">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

（そしてもちろんpageLoad JavaScriptのものを取り除く...）

どちらの例はdataItemオブジェクトに結合する双方向の設定します。つまり、値マッチング<option>とオプションであるように、第3 dataItem.Fooが選択されているページのロード時、あなたは見ることができます。あなたは、ドロップダウンから別の項目を選択すると、新しい値でdataItem.Fooアップデート選択します。

助け

希望！

他のヒント

私は実際にこれを試していないが、それはのいずれかのように見えますこれらの 3 の<のhref = "のhttp：//ブログ.visoftinc.com /アーカイブ/ 2009/4月28日/ ASP.NET-4.0-AJAX-プレビュー-4-クライアントTemplates.aspx」のrel = "nofollowをnoreferrer">ブログ記事が役立つかもしれないにリンクしています。すべての例では、データのリストへの結合を示しています。たぶん、このような何かます：

の *サンプル私のVS 2010のcompが逮捕されたと密接<のhref = "http://blogs.visoftinc.com/archive/2009/04/28/ASP.NET-4.0に由来しているテストされていません-AJAXプレビュー-4-クライアントTemplates.aspx」REL = "nofollowをnoreferrer">第3リンクする * の

var sampleData = [
    { Value: "1", Text: "1" },
    { Value: "2", Text: "2" },
];
var select = "1";

<select id="list" class="sys-template" 
    sys:attach="dataview" 
    dataview:data="{{ sampleData }}">
    <option value="{{ Value }}">{{ Text }}</option>
</select>

次に、（ブルートフォース方法で行わ）必要な値を選択する

var list = document.getElementById( "list");
foreach ( var option in list.options)
{
    if( option.value == select)
    {
        option.selected = true;
        break;
    }
}

や「選択」オプションのためのバインディングを含めるためのテンプレートを微調整。 （ここでもテストされていない、あなたは本当の選択===を実行できない場合があります）。

var sampleData = [
    { Value: "1", Text: "1", Selected: true },
    { Value: "2", Text: "2" },
];
var select = "1";

<select id="list" class="sys-template" 
    sys:attach="dataview" 
    dataview:data="{{ sampleData }}">
    <option value="{{ Value }}" selected="{{ Selected === true }}">{{ Text }}</option>
</select>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top