0

これは、backbone.jsとWebAPIコントローラーを使用する場合の2段階の問題です。

JSON文字列を返す単純なWebAPIコントローラーがあります。フィドラーでは、結果は次のようになります。

{
    "$type": "MvcApplication.Models.Article, MvcApplication",
    "Id": "1",
    "Heading":"The heading"
}

次のコードを使用して、WebAPIからユーザーをフェッチします

var user = new Usermodel({ id: "1" });

user.fetch({
    success: function (u) {
        console.log(u.toJSON());
    }
});

これで、バックボーンユーザーオブジェクトは次のようになります

{
    id: "1",
    {
        "$type": "MvcApplication.Models.Article, MvcApplication",
        "Id": "1",
        "Heading": "The heading"
    }
}

このバックボーンモデルオブジェクトを次のようなビューテンプレートにバインドしようとすると

<form>
    <input type="text" value="<%=Heading%>" />
    <input type="submit" value="Save" />
</form>

見出しは未定義ですが、idを使用するとうまくバインドされますか？アンダースコアはバックボーンモデルオブジェクトが好きではなく、WebAPIから取得したものと同じようにプレーンなJSONオブジェクトが必要なようです。

user.save({ Heading: "my new heading });これに関する2番目の問題は、ペイロードを含むモデルをWeb APIに保存すると、バックボーンモデルが完全に間違っていることです。これは、APIが次のようなユーザーオブジェクトがサーバーに送信されることを想定しているためです。

{
    "$type": "MvcApplication.Models.Article, MvcApplication",
    "Id": "1",
    "Heading":"The heading"
}

実際のオブジェクトがラップされたバックボーンモデルではありません。アンダースコアがバックボーンモデルを処理し、エンドポイントが期待するペイロードのみを送信するようにバックボーンに指示できるように解決することは可能ですか？

4

3 に答える 3

1

次の手順に従って、問題を解決できる場合があります。

フィドラーを使用して応答を検査することに加えて、Chromeデベロッパーツールの[ネットワーク]タブで応答を確認します。応答がこのように見えない場合、Web APIは有効なjson応答を返していません。問題は、WebAPI内にある可能性があります。問題を解決するには、WebAPIに関する詳細情報を取得/提供する必要があります。応答が次のようになっていることを確認します。

ここに画像の説明を入力してください

Web APIからの応答が正しいことを確認した後、変更した次のjsfiddleを確認してください。

http://jsfiddle.net/J83aU/23/

私が提供した例を参照して、クライアント側のコードを修正します。

バックボーンオブジェクトを適切にインスタンス化します。

サーバーから応答を受信した後、正しいステップでview.render関数を呼び出します。

'view.el'プロパティでメインコンテンツdivに依存するビューを作成する前に、メインコンテンツdivが実際にレンダリングされていることを確認してください。

jQueryオブジェクトではなく文字列を使用して、「view.el」プロパティを適切に宣言します。

開発バックボーンとアンダースコアを使用してデバッグを有効にします。これは、バックボーンなどのオープンソースフレームワークの使用を学習する際の重要な概念です。

手順1で説明したように、jsfiddleのecho / json apiを使用して、有効なajaxjson応答をモックします。

送信した次のjsonの例は、有効なjsonでもありません。質問を有効なjsonの例で更新すると、問題を解決するのが簡単になります。Backboneがこの非json構造を作成した可能性は低く、ここで誤って送信した可能性が高くなります。

{
    id: "1",
    {
        "$type": "MvcApplication.Models.Article, MvcApplication",
        "Id": "1",
        "Heading": "The heading"
    }
}

最後に、model.save（）を呼び出したときに発生している問題について、httpヘッダーのスクリーンショットなどを提供してみてください。

model.save（）のバックボーンのドキュメントを読み、提供されている例と同じようにすべてを実行していることを確認してください。

ajaxオプションを使用して属性をPOSTパラメーターに強制することで、Backboneのファンキーな保存機能を回避できる場合があります。

$.fn.serializeObject = function(){
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

var saveView = Backbone.View.extend({
    events:{
        'click #saveSubmitButton':'submit'
    },
    submit:function (event) {

        event.preventDefault();
        var view = this, 
            attributes = $('#saveForm').serializeObject();

        this.model.save(attributes, {
            data:attributes,
            processData:true,
            success:function (model) {
                //....
            }
        });
    },
    render:function () {
        //.......
    }
});
于 2013-03-25T17:22:19.060 に答える
0

モデルの属性プロパティは変更しないでください。それらをテンプレート呼び出しに送信します。

var MyModel = Backbone.Model.extend();
var newModel = new MyModel({
    "$type": "MvcApplication.Models.Article, MvcApplication",
    "Heading":"The heading"
});
var html = _.template(templateVar, newModel.attributes);

テンプレート化されたマークアップであるtemplateVarで、$typeとHeadingを直接参照できるはずです。

于 2013-03-17T17:08:17.590 に答える
0

FirebugなどのデバッガーでjsFiddleを見ると、スラッシュがエンコードされているため、モデルのURLを作成する方法がうまく機能していないことがわかります。モデル宣言を次のように変更してみてください。

var Usermodel = Backbone.Model.extend({
    url: function () {
        return '/api/page/articles/' + this.get('id');
    }    
});

var user = new Usermodel({
    id: '85'
});

そして、それでも同じJSONを取得できるかどうかを確認します。基本的に、Backbone.syncオーバーライドがない場合は、無効なJSONを生成しない組み込みの取得を使用しています。

于 2013-03-17T18:44:43.260 に答える