KnockoutJs & Asp.Net MVC 4 — просмотр нескольких моделей

Я нахожусь в ситуации, когда у меня есть 2 вкладки, и для каждой вкладки у меня есть частичные представления, я использую пользовательский интерфейс jquery для создания своих вкладок.

У меня есть два варианта для каждого пользователя: 1. сохранить, 2. отправить.

При сохранении он будет сохранен для этой конкретной вкладки (где вкладка содержит вид модели 1) для второй такой же (где эта вкладка содержит вид модели 2)

Как я могу отправить обе модели с обеих вкладок одним щелчком мыши?

У меня есть что-то подобное в моем сохранении для вкладки 1 и вкладки 2.

Моя первая просмотровая модель.

       self.save = function() {
            $.ajax({
                url: "MyTabs",
                data: { data: ko.toJSON(self.firstVM) },
                type: "post", 
                contentType: "application/json",
                success: function(result) { alert(result); }
            });
        };

Моя вторая модель просмотра.

         self.save = function() {
            $.ajax({
                url: "MyTabs",
                data: { data: ko.toJSON(self.secondVM) },
                type: "post", 
                contentType: "application/json",
                success: function(result) { alert(result); }
            });
         };

knockout.js knockout-mvc knockout-validation knockout-mapping-plugin knockout-2.0
person NoviceDeveloper    schedule 01.04.2013    source источник
comment
Вы хотите, чтобы они были отправлены на один URL? или их можно подавать отдельно? Я имею в виду, нужно ли вам делать те же вызовы ajax или это будет совершенно другой URL-адрес, который принимает другой объект?   -  person Sujesh Arukil    schedule 01.04.2013
comment
Суджеш, это тот же URL...   -  person NoviceDeveloper    schedule 01.04.2013
comment
Существуют разные подходы к этому. 1. Вам нужна модель parentViewModel, которая содержит двух дочерних элементов. И тогда отправка будет в родительском элементе, который может принимать значения от дочерних элементов. Другой подход (гораздо более несвязанный подход) заключается в использовании pub/sub. Вы создаете модель представления для выполнения отправки. Кнопка отправки при нажатии вызовет модель представления для отправки данных. Функция отправки отправляет вызов для отправки всех данных и подписывается на события, которые будут опубликованы двумя дочерними моделями представления. Вы можете использовать amplify js для публикации/подписки.   -  person Sujesh Arukil    schedule 01.04.2013

Ответы (1)


arrow_upward
1
arrow_downward

В продолжение моего комментария. Вот скрипка для первого подхода.

http://jsfiddle.net/sujesharukil/FDPAn/

var child1ViewModel = function(){
    var x = ko.observable(1),
            y = ko.observable('child1'),
        getData = function(){
            return JSON.stringify({x: x(), y: y()});
           },
        save= function(){

            alert(getData());
            //some ajax call
        };


    return {
        x: x,
        y: y,
        save: save,
        getData: getData
    }
};

var child2ViewModel = function(){
    var x = ko.observable(2),
        y = ko.observable('child2'),
        getData = function(){
            return JSON.stringify({x: x(), y: y()});
        },
        save= function(){

            alert(getData());
            //some ajax call
        };

    return {
        x: x,
        y: y,
        save: save,
        getData: getData
    }
};

var parentViewModel = function(){
    var child1 = new child1ViewModel(),
        child2 = new child2ViewModel(),
        submit = function(){
            var data = {
                child1Data: child1.getData(),
                child2Data : child2.getData()
            };
            alert(JSON.stringify(data));
            //make ajax submit
        };

    return {
        child1: child1,
        child2: child2,
            submit: submit
    }
}

ko.applyBindings(new parentViewModel());

и HTML будет

<form data-bind="submit: submit">
    <h1>Data from CHild 1</h1>
    x = <input data-bind="value: child1.x"/><br/>
    y = <input data-bind="value: child1.y"/><br/>
    <button type="button" data-bind="click: child1.save">Save Child1</button>
    <h1>Data from CHild 2</h1>
    x = <input data-bind="value: child2.x"/><br/>
    y = <input data-bind="value: child2.y"/><br/>
    <button type="button" data-bind="click: child2.save">Save Child2</button><br/>
    <button type="submit">Submit</button>
</form>

Надеюсь, это поможет.

person Sujesh Arukil    schedule 01.04.2013