6

オブジェクトをフォームにデータ リンクしているときに奇妙な動作が発生し、データ バインドとは正確には何なのかという疑問が生じました。

基本的に、新しい会社を作成して更新するフォームがあります。実際の作成/更新は ajax を介して行われるため、両方の目的で同じフォームを使用しています。会社を設立する必要がある場合、すべてが期待どおりに機能します。ただし、会社を更新する必要がある場合、期待どおりに機能しません。次のコードを見てください。

これが私のフォームHTMLのサンプルです：

<div id="result"></div>

<script type="text/x-jsrender" id="CompanyFormTemplate">
    <form>
        <input type="text" data-link="Company.Name" />
    </form>
</script>

ここに私のJavascriptコードがあります:

var app = new CompanyFormContext();

function CompanyFormContext() { 
    this.Company = {
        Name: ''
    };

    this.setCompany = function (company) {
        if (company) {
            $.observable(this).setProperty('Company', company);
        }
    };
};

$(function () {
    initPage(); 

    ...

    if (...) {
        // we need to update company information

        app.setCompany({ Name: 'Company ABC' });
    }
});

function initPage() {
    var template = $.templates('#CompanyFormTemplate');
    template.link("#result", app);
}

「Company ABC」を示すフォーム入力の代わりに、それは空です。ただし、何かを入力すると、Company.Name の値が変わります。しかし、データへの入力を Company オブジェクトの Name プロパティにバインドする一方で、(親) Company オブジェクトに加えられた変更を認識し、それに応じて Name プロパティへのデータ バインディングを更新することも必要です。

だから私の質問は、ルートオブジェクトとプロパティの両方でデータバインドを達成できるように、このコードの書き方をどのように変更すればよいですか?

4

2 に答える 2

4

あなたが抱えていた問題は、あなたのシナリオでCompany.Nameは、リーフ プロパティの変更だけでなく、パスの上位にあるオブジェクトの置換を含む変更 (この場合は会社) にデータ リンクするようなパスがあるためです。 .

そのためには、構文を使用する必要がありますdata-link="Company^Path"。

このドキュメント トピック の「パス: リーフの変更または深い変更」セクションを参照してください: http://www.jsviews.com/#observe@deep。

このトピックの例: プレーン オブジェクトと配列を使用した JsViewsなどの例も参照してください: http://www.jsviews.com/#explore/objectsorvm。

これは、その構文を使用した jsfiddle の更新です: https://jsfiddle.net/msd5oov9/2/。

ところで、FWIW、使用した修正で{^{for}}は、2 番目のテンプレートを使用する必要はありませんでした。代わりに、次のように記述できます。

<form class="form-horizontal">
    {^{for Company}}
        ...
        <input type="text" data-link="Name" />
    {{/for}}
</form>

以下のコメントのフォローアップの質問にも回答するには、任意の「ブロック」タグをテンプレートに関連付けることができます。タグでを使用tmpl=...するということは、ブロック コンテンツであったものを別の再利用可能なテンプレートに分離することを決定したことを意味します。(「部分的」とは言えません)。そのテンプレートのデータ コンテキストは、ブロック内にある場合と同じになります。

具体的には、{{include}} {{if}} および {{else}} タグはデータ コンテキストを移動しませんが、{{for}} および {{props}} は移動します。カスタムタグを使用すると、決定できます...

したがって、あなたの場合は または のいずれかを使用できます{^{for Company tmpl=.../}}が{{include tmpl=.../}}、2番目のケースでは、参照する他のテンプレートは<input type="text" data-link="Company^Name" />ではなくを使用します<input type="text" data-link="Name" />。

関連するリンクを次に示します。

于 2015-05-19T16:26:19.563 に答える