6

ActionLinkテーブルの最初の列に定義を含むテーブルを表示するために、KnockoutJS と MVC 4 を利用しようとしています。データ自体の表示は非常に簡単で、問題はありません。私が抱えている問題は、の生成にありActionLinkます。

Use MVC helpers inside jquery.tmpl templates を見てきましたが、そこのソリューションはノックアウト テンプレートを利用しておらず、Url をモデル オブジェクトに挿入することはできません (ビュー モデルの作成に使用されるアプリ ドメイン モデル オブジェクトが使用されます)。アプリケーション全体に広く適用されます)。

テーブル定義:

<table>
    <tbody data-bind="template: { name: 'dmuTableDetail', foreach: tables() }"></tbody>
</table>

(tablesは観測可能な配列であるため、括弧です)。

ノックアウト テンプレートの定義:

<script id="dmuTableDetail" type="text/html">
    <tr>
        <td>@Html.ActionLink("Details", "Details", "DMUTableCategory", new { @Id = ??? } )</td>
        <td data-bind="text:TableId"></td>
        <td data-bind="text:TableName"></td>
    </tr>
</script>​

ビュー モデルの定義:

var PageViewModel = function () {
    self = this;

    self.tables = ko.observableArray([]);

    self.readItems = function () {
        self.tables(jQuery.parseJSON('[{"TableId":1001, "TableName":"Table#1"},{"TableId":1002, "TableName":"Table#2"}]'));
    }
}

$(document).ready(function () {
    vm = new PageViewModel();
    self.readItems('');
    ko.applyBindings(vm);
});

(実際のコードはデータを取得するために Ajax 呼び出しを実行しますが、上記のコードも問題を示しています)。

を何に置き換えても、href に挿入するフィールド???の値を取得できません。TableId

どんな助けでも大歓迎です。

ありがとうございました。

4

2 に答える 2

7

ありがとうエリック、アンカー要素とhref属性のバインドについて考えさせられました。

答えは予想よりも少し簡単なようです (通常はそうです!)。

テーブル定義：（元の質問と同じ）

<table>
    <tbody data-bind="template: { name: 'dmuTableDetail', foreach: tables() }"></tbody>
</table>

ノックアウト テンプレートの定義: (属性のバインディングに変更href)。

<script id="dmuTableDetail" type="text/html">
    <tr>
        <td><a data-bind="attr: { 'href': '@Url.Action("Details", new RouteValueDictionary() { { "Controller", "DMUTableCategory" } } )/' + TableId }">Details</a></td>
        <td data-bind="text:TableId"></td>
        <td data-bind="text:TableName"></td>
    </tr>
</script>?

ビューモデルの定義: (元の質問と同じ)

var PageViewModel = function () {
    self = this;

    self.tables = ko.observableArray([]);

    self.readItems = function () {
        self.tables(jQuery.parseJSON('[{"TableId":1001, "TableName":"Table#1"},{"TableId":1002, "TableName":"Table#2"}]'));
    }
}

$(document).ready(function () {
    vm = new PageViewModel();
    self.readItems('');
    ko.applyBindings(vm);
});

実際には必要ありRootValueDictionaryませんが、リクエストの送信先のコントローラーを変更する方法を人々が確認できるように含めました。

于 2012-08-10T23:21:20.433 に答える
3

Knockout はクライアント側で完全にバインドします。これは、MVC がページの HTML をレンダリングし、元のブラウザーに送り返した後です。

Knockout テンプレートでサーバー上で生成された URL を使用できるようにする場合は、次のような巧妙な戦略を採用する必要があります。

CSHTML:

@{
    // create a dummy URL that you can use as a template
    string hrefFormat = Url.Action("Details", "DMUTableCategory", new { id = "{ID}" });
}

<script type="javascript">
    // a global string (but you can put it where ever you need to)
    var _hrefFormat = @Html.Raw(hrefFormat)
<script>

JS:

self.readItems = function () {
    self.tables(jQuery.parseJSON('[{"TableId":1001, "TableName":"Table#1"},{"TableId":1002, "TableName":"Table#2"}]'));


    // loop through the 'tables' and add a new 'href' property to each for binding
    ko.utils.arrayForEach(self.tables(), function(table){
         table.href = _hrefFormat.replace("{ID}", table.TableId);
    });
}

a各テーブル オブジェクトの「href」プロパティをタグの href 属性にバインドする KO Tmpl :

<script id="dmuTableDetail" type="text/html">
    <tr>
        <td><a data-bind="attr: { 'href': href }">Details</a></td>
        <td data-bind="text:TableId"></td>
        <td data-bind="text:TableName"></td>
    </tr>
</script>​
于 2012-08-10T03:53:54.697 に答える