Как использовать knockout.js с ASP.NET MVC ViewModels?

Bounty

Было немного, и у меня все еще есть пара нерешенных вопросов. Надеюсь, добавив щедрость, возможно, на эти вопросы ответят.

  • Как вы используете html-помощники с knockout.js
  • Почему документ был готов для его работы (см. сначала редактирование для получения дополнительной информации)

  • Как мне сделать что-то подобное, если я использую сопоставление нокаутов с моими моделями просмотров? Поскольку у меня нет функции из-за отображения.

    function AppViewModel() {
    
        // ... leave firstName, lastName, and fullName unchanged here ...
    
        this.capitalizeLastName = function() {
    
        var currentVal = this.lastName();        // Read the current value
    
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    
    };
    
  • Я хочу использовать плагины, например, я хочу иметь возможность отката наблюдаемых, как если бы пользователь отменяет запрос, который я хочу, чтобы вернуться к последнему значению. Из моих исследований это, по-видимому, достигается людьми, создающими плагины вроде editables

    Как я могу использовать что-то подобное, если я использую сопоставление? Я действительно не хочу идти к методу, в котором у меня есть ручное сопоставление. Я сопоставляю каждое поле MVC viewMode с полем модели KO, поскольку я хочу как можно меньше встроенного javascript, и это похоже на двойную работу, и именно поэтому я как это отображение.

  • Я обеспокоен тем, что для упрощения этой работы (с помощью сопоставления) я потеряю много мощности KO, но, с другой стороны, я обеспокоен тем, что ручное сопоставление будет просто большой работой и сделает мой представления содержат слишком много информации и могут стать в будущем труднее поддерживать (скажем, если я удалю свойство в модели MVC, я должен переместить его также в режиме просмотра KO)


Оригинальная почта

Я использую asp.net mvc 3, и я смотрю в нокаут, так как он выглядит довольно круто, но мне трудно понять, как это работает с особенностями просмотра asp.net mvc.

Для меня прямо сейчас я делаю что-то вроде этого

 public class CourseVM
    {
        public int CourseId { get; set; }
        [Required(ErrorMessage = "Course name is required")]
        [StringLength(40, ErrorMessage = "Course name cannot be this long.")]
        public string CourseName{ get; set; }


        public List<StudentVm> StudentViewModels { get; set; }

}

У меня был бы Vm, у которого есть некоторые основные свойства, такие как CourseName, и он будет иметь простую проверку поверх него. Модель Vm также может содержать другие модели просмотра, если это необходимо.

Затем я передал бы этот Vm в View, я бы использовал html-помощники, чтобы помочь мне отобразить его пользователю.

@Html.TextBoxFor(x => x.CourseName)

У меня могут быть некоторые петли foreach или что-то, чтобы получить данные из коллекции моделей просмотра учащихся.

Тогда, когда я отправлю форму, я буду использовать jquery и serialize array и отправить ее методу действия контроллера, который привяжет его к viewmodel.

С knockout.js это все по-другому, так как теперь у вас есть viewmodels для него, и из всех примеров, которые я видел, они не используют html-помощники.

Как вы используете эти 2 функции MVC с knockout.js?

Я нашел это видео, и он вкратце (последние несколько минут видео @18:48) позволяет использовать viewmodels, в основном имея встроенный script, который имеет модель представления knockout.js, которая получает значения в ViewModel.

Это единственный способ сделать это? Как насчет моего примера с наличием в нем коллекции viewmodels? Должен ли я иметь цикл foreach или что-то, чтобы извлечь все значения и назначить его в нокаут?

Что касается html-помощников, видео ничего не говорит о них.

Это 2 области, которые смущают меня, поскольку не многие люди, похоже, говорят об этом, и это оставляет меня в замешательстве, как начальные значения и все приближается к мнению, когда когда-либо это пример, пример значения.


Edit

Я пробую то, что предложил Дарин Димитров, и это, кажется, работает (я должен был внести некоторые изменения в его код, хотя). Не уверен, почему мне пришлось использовать документ, но как-то все было без него.

@model MvcApplication1.Models.Test

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
   <script type="text/javascript">

   $(function()
   {
      var model = @Html.Raw(Json.Encode(Model));


// Activates knockout.js
ko.applyBindings(model);
   });

</script>

</head>
<body>
    <div>
        <p>First name: <strong data-bind="text: FirstName"></strong></p>
        <p>Last name: <strong data-bind="text: LastName"></strong></p>
        @Model.FirstName , @Model.LastName
    </div>
</body>
</html>

Мне пришлось обернуть его вокруг документа jquery, готового заставить его работать.

Я также получаю это предупреждение. Не уверен, в чем дело.

Warning 1   Conditional compilation is turned off   -> @Html.Raw

Итак, у меня есть отправная точка, я думаю, по крайней мере будет обновляться, когда я еще немного поиграю и как это работает.

Я пытаюсь пройти интерактивные учебные пособия, но вместо этого использую ViewModel.

Не знаю, как справиться с этими частями.

function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
}

или

function AppViewModel() {
    // ... leave firstName, lastName, and fullName unchanged here ...

    this.capitalizeLastName = function() {
        var currentVal = this.lastName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };


Изменить 2

Мне удалось выяснить первую проблему. Никакой информации о второй проблеме. Тем не менее. У кого-нибудь есть идеи?

 @model MvcApplication1.Models.Test

    @{
        Layout = null;
    }

    <!DOCTYPE html>

    <html>
    <head>
        <title>Index</title>
        <script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
        <script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
        <script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
       <script type="text/javascript">

       $(function()
       {
        var model = @Html.Raw(Json.Encode(Model));
        var viewModel = ko.mapping.fromJS(model);
        ko.applyBindings(viewModel);

       });

    </script>

    </head>
    <body>
        <div>
            @*grab values from the view model directly*@
            <p>First name: <strong data-bind="text: FirstName"></strong></p>
            <p>Last name: <strong data-bind="text: LastName"></strong></p>

            @*grab values from my second view model that I made*@
            <p>SomeOtherValue <strong data-bind="text: Test2.SomeOtherValue"></strong></p>
            <p>Another <strong data-bind="text: Test2.Another"></strong></p>

            @*allow changes to all the values that should be then sync the above values.*@
            <p>First name: <input data-bind="value: FirstName" /></p>
            <p>Last name: <input data-bind="value: LastName" /></p>
            <p>SomeOtherValue <input data-bind="value: Test2.SomeOtherValue" /></p>
            <p>Another <input data-bind="value: Test2.Another" /></p>

           @* seeing if I can do it with p tags and see if they all update.*@
            <p data-bind="foreach: Test3">
                <strong data-bind="text: Test3Value"></strong> 
            </p>

     @*took my 3rd view model that is in a collection and output all values as a textbox*@       
    <table>
        <thead><tr>
            <th>Test3</th>
        </tr></thead>
          <tbody data-bind="foreach: Test3">
            <tr>
                <td>    
                    <strong data-bind="text: Test3Value"></strong> 
<input type="text" data-bind="value: Test3Value"/>
                </td>
            </tr>    
        </tbody>
    </table>

контроллер

  public ActionResult Index()
    {
              Test2 test2 = new Test2
        {
            Another = "test",
            SomeOtherValue = "test2"
        };

        Test vm = new Test
        {
            FirstName = "Bob",
            LastName = "N/A",
             Test2 = test2,

        };
        for (int i = 0; i < 10; i++)
        {
            Test3 test3 = new Test3
            {
                Test3Value = i.ToString()
            };

             vm.Test3.Add(test3);
        }

        return View(vm);
    }

Ответ 1

Я думаю, что я обобщил все ваши вопросы, если я пропустил что-то, пожалуйста, дайте мне знать (если бы вы могли суммировать все ваши вопросы в одном месте, было бы хорошо =))

Примечание. Совместимость с добавленным плагином ko.editable

Загрузить полный код

Как вы используете html-помощники с knockout.js

Это легко:

@Html.TextBoxFor(model => model.CourseId, new { data_bind = "value: CourseId" })

Где:

  • value: CourseId указывает, что вы привязываете свойство value элемента управления input с свойством CourseId от вашей модели и вашей модели script

Результат:

<input data-bind="value: CourseId" data-val="true" data-val-number="The field CourseId must be a number." data-val-required="The CourseId field is required." id="CourseId" name="CourseId" type="text" value="12" />

Почему документ был готов для его работы (см. первое редактирование для получения дополнительной информации)

Я пока не понимаю, почему вам нужно использовать событие ready для сериализации модели, но кажется, что это просто требуется (не беспокоиться об этом, хотя)

Как мне сделать что-то подобное, если я использую сопоставление нокаутов с моими моделями просмотров? Поскольку у меня нет функции из-за отображения.

Если я правильно понял, вам нужно добавить новый метод к модели KO, так что легко слияние моделей

Для получения дополнительной информации в разделе" Сопоставление из разных источников -

function viewModel() {
    this.addStudent = function () {
        alert("de");
    };
};

$(function () {
    var jsonModel = '@Html.Raw(JsonConvert.SerializeObject(this.Model))';
    var mvcModel = ko.mapping.fromJSON(jsonModel);

    var myViewModel = new viewModel();
    var g = ko.mapping.fromJS(myViewModel, mvcModel);

    ko.applyBindings(g);
});

Об предупреждении, которое вы получали

Предупреждение 1 Условная компиляция отключена → @Html.Raw

Вам нужно использовать кавычки

Совместимость с подключаемым модулем ko.editable

Я думал, что это будет сложнее, но оказывается, что интеграция очень проста, чтобы сделать вашу модель редактируемой, просто добавьте следующую строку: (помните, что в этом случае я использую смешанную модель, от сервера и добавления расширения в клиенте, а редактируемый просто работает... это отлично):

    ko.editable(g);
    ko.applyBindings(g);

Отсюда вам просто нужно играть со своими привязками, используя расширения, добавленные плагином, например, у меня есть кнопка, чтобы начать редактировать мои поля, как это, и в этой кнопке я запускаю процесс редактирования:

    this.editMode = function () {
        this.isInEditMode(!this.isInEditMode());
        this.beginEdit();
    };

Затем у меня есть кнопки фиксации и отмены со следующим кодом:

    this.executeCommit = function () {
        this.commit();
        this.isInEditMode(false);
    };
    this.executeRollback = function () {
        if (this.hasChanges()) {
            if (confirm("Are you sure you want to discard the changes?")) {
                this.rollback();
                this.isInEditMode(false);
            }
        }
        else {
            this.rollback();
            this.isInEditMode(false);
        }
    };

И, наконец, у меня есть одно поле, указывающее, находятся ли поля в режиме редактирования или нет, это просто привязать свойство enable.

this.isInEditMode = ko.observable(false);

О задании массива

У меня могут быть некоторые петли foreach или что-то, чтобы получить данные из коллекции моделей просмотра учащихся.

Затем, когда я отправлю форму, я буду использовать jquery и сериализуем массив и отправить его методу действия контроллера, который привяжет его к viewmodel.

Вы можете сделать то же самое с KO, в следующем примере я создам следующий вывод:

enter image description here

В принципе, у вас есть два списка, созданные с помощью Helpers и привязанные к KO, у них есть связанное событие dblClick, которое при запуске удаляет выбранный элемент из текущего списка и добавляет его в другой список, когда вы отправляете сообщение в Controller, содержимое каждого списка отправляется как данные JSON и повторно привязывается к модели сервера

Nuggets:

Внешний скрипты.

Код контроллера

    [HttpGet]
    public ActionResult Index()
    {
        var m = new CourseVM { CourseId = 12, CourseName = ".Net" };

        m.StudentViewModels.Add(new StudentVm { ID = 545, Name = "Name from server", Lastname = "last name from server" });

        return View(m);
    }

    [HttpPost]
    public ActionResult Index(CourseVM model)
    {
        if (!string.IsNullOrWhiteSpace(model.StudentsSerialized))
        {
            model.StudentViewModels = JsonConvert.DeserializeObject<List<StudentVm>>(model.StudentsSerialized);
            model.StudentsSerialized = string.Empty;
        }

        if (!string.IsNullOrWhiteSpace(model.SelectedStudentsSerialized))
        {
            model.SelectedStudents = JsonConvert.DeserializeObject<List<StudentVm>>(model.SelectedStudentsSerialized);
            model.SelectedStudentsSerialized = string.Empty;
        }

        return View(model);
    }

Model

public class CourseVM
{
    public CourseVM()
    {
        this.StudentViewModels = new List<StudentVm>();
        this.SelectedStudents = new List<StudentVm>();
    }

    public int CourseId { get; set; }

    [Required(ErrorMessage = "Course name is required")]
    [StringLength(100, ErrorMessage = "Course name cannot be this long.")]
    public string CourseName { get; set; }

    public List<StudentVm> StudentViewModels { get; set; }
    public List<StudentVm> SelectedStudents { get; set; }

    public string StudentsSerialized { get; set; }
    public string SelectedStudentsSerialized { get; set; }
}

public class StudentVm
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Lastname { get; set; }
}

Страница CSHTML

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>CourseVM</legend>

        <div>
            <div class="editor-label">
                @Html.LabelFor(model => model.CourseId)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.CourseId, new { data_bind = "enable: isInEditMode, value: CourseId" })
                @Html.ValidationMessageFor(model => model.CourseId)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.CourseName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.CourseName, new { data_bind = "enable: isInEditMode, value: CourseName" })
                @Html.ValidationMessageFor(model => model.CourseName)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.StudentViewModels);
            </div>
            <div class="editor-field">

                @Html.ListBoxFor(
                    model => model.StudentViewModels,
                    new SelectList(this.Model.StudentViewModels, "ID", "Name"),
                    new
                    {
                        style = "width: 37%;",
                        data_bind = "enable: isInEditMode, options: StudentViewModels, optionsText: 'Name', value: leftStudentSelected, event: { dblclick: moveFromLeftToRight }"
                    }
                )
                @Html.ListBoxFor(
                    model => model.SelectedStudents,
                    new SelectList(this.Model.SelectedStudents, "ID", "Name"),
                    new
                    {
                        style = "width: 37%;",
                        data_bind = "enable: isInEditMode, options: SelectedStudents, optionsText: 'Name', value: rightStudentSelected, event: { dblclick: moveFromRightToLeft }"
                    }
                )
            </div>

            @Html.HiddenFor(model => model.CourseId, new { data_bind="value: CourseId" })
            @Html.HiddenFor(model => model.CourseName, new { data_bind="value: CourseName" })
            @Html.HiddenFor(model => model.StudentsSerialized, new { data_bind = "value: StudentsSerialized" })
            @Html.HiddenFor(model => model.SelectedStudentsSerialized, new { data_bind = "value: SelectedStudentsSerialized" })
        </div>

        <p>
            <input type="submit" value="Save" data-bind="enable: !isInEditMode()" /> 
            <button data-bind="enable: !isInEditMode(), click: editMode">Edit mode</button><br />
            <div>
                <button data-bind="enable: isInEditMode, click: addStudent">Add Student</button>
                <button data-bind="enable: hasChanges, click: executeCommit">Commit</button>
                <button data-bind="enable: isInEditMode, click: executeRollback">Cancel</button>
            </div>
        </p>
    </fieldset>
}

Сценарии

<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ko.editables.js")" type="text/javascript"></script>

<script type="text/javascript">
    var g = null;
    function ViewModel() {
        this.addStudent = function () {
            this.StudentViewModels.push(new Student(25, "my name" + new Date(), "my last name"));
            this.serializeLists();
        };
        this.serializeLists = function () {
            this.StudentsSerialized(ko.toJSON(this.StudentViewModels));
            this.SelectedStudentsSerialized(ko.toJSON(this.SelectedStudents));
        };
        this.leftStudentSelected = ko.observable();
        this.rightStudentSelected = ko.observable();
        this.moveFromLeftToRight = function () {
            this.SelectedStudents.push(this.leftStudentSelected());
            this.StudentViewModels.remove(this.leftStudentSelected());
            this.serializeLists();
        };
        this.moveFromRightToLeft = function () {
            this.StudentViewModels.push(this.rightStudentSelected());
            this.SelectedStudents.remove(this.rightStudentSelected());
            this.serializeLists();
        };
        this.isInEditMode = ko.observable(false);
        this.executeCommit = function () {
            this.commit();
            this.isInEditMode(false);
        };
        this.executeRollback = function () {
            if (this.hasChanges()) {
                if (confirm("Are you sure you want to discard the changes?")) {
                    this.rollback();
                    this.isInEditMode(false);
                }
            }
            else {
                this.rollback();
                this.isInEditMode(false);
            }
        };
        this.editMode = function () {
            this.isInEditMode(!this.isInEditMode());
            this.beginEdit();
        };
    }

    function Student(id, name, lastName) {
        this.ID = id;
        this.Name = name;
        this.LastName = lastName;
    }

    $(function () {
        var jsonModel = '@Html.Raw(JsonConvert.SerializeObject(this.Model))';
        var mvcModel = ko.mapping.fromJSON(jsonModel);

        var myViewModel = new ViewModel();
        g = ko.mapping.fromJS(myViewModel, mvcModel);

        g.StudentsSerialized(ko.toJSON(g.StudentViewModels));
        g.SelectedStudentsSerialized(ko.toJSON(g.SelectedStudents));

        ko.editable(g);
        ko.applyBindings(g);
    });
</script>

Примечание. Я добавил следующие строки:

        @Html.HiddenFor(model => model.CourseId, new { data_bind="value: CourseId" })
        @Html.HiddenFor(model => model.CourseName, new { data_bind="value: CourseName" })

Потому что, когда я отправляю форму, мои поля отключены, поэтому значения не были переданы на сервер, поэтому я добавил пару скрытых полей, чтобы сделать трюк

Ответ 2

Вы можете сериализовать модель представления ASP.NET MVC в переменную javascript:

@model CourseVM
<script type="text/javascript">
    var model = @Html.Raw(Json.Encode(Model));
    // go ahead and use the model javascript variable to bind with ko
</script>

В документации для нокаутов есть много примеров, которые вы могли бы пройти.

Ответ 3

Чтобы достичь дополнительных вычисляемых свойств после сопоставления серверов, вам нужно будет еще больше улучшить свои модели просмотра на стороне клиента.

Например:

var viewModel = ko.mapping.fromJS(model);

viewModel.capitalizedName = ko.computed(function() {...}, viewModel);

Таким образом, каждый раз, когда вы набираете исходный JSON, вам нужно будет повторно использовать вычисленные свойства.

Кроме того, плагин сопоставления предоставляет возможность поэтапно обновлять модель представления, а не воссоздавать ее каждый раз, когда вы идете туда и обратно (используйте дополнительный параметр в fromJS):

// Every time data is received from the server:
ko.mapping.fromJS(data, viewModel);

И это выполняет инкрементное обновление данных в вашей модели только свойств, которые отображаются. Подробнее об этом можно узнать в документации для сопоставления

Вы упомянули в комментариях к Дарину ответ на FluentJSON. Я автор этого, но его прецедент более конкретный, чем ko.mapping. Обычно я использую его только в том случае, если ваши режимы просмотра являются одним из способов (то есть сервер → клиент), а затем данные отправляются обратно в другом формате (или вообще не отображаются). Или, если ваша модель просмотра javascript должна быть в существенно другом формате от вашей модели сервера.