knockout.js Как получить значения из формы и получить дополнительные данные ASP.NET MVC

Question

Что я получил это:

var post = function(id, message, username, date) { 
    this.id = id; 
    this.message = message; 
    this.username = username; 
    this.date = date; 
    this.comments = ko.observableArray([]); 

    this.addComment = function(context) { 

     var comment = $('input[name="comment"]', context).val(); 
     if (comment.length > 0) { 
      $.connection.boardHub.server.addComment(this.id, comment, vm.username()) 
       .done(function() { 
        $('input[name="comment"]', context).val(''); 
       }); 
     } 
    }; 

А Вид:

<form class="add-comment" data-bind="submit: addComment"> 
    <div class="row"> 
    <div class="col-md-9"> 
    <input type="text" class="form-control" name="comment" placeholder="" /> 
    </div> 
    <div class="col-md-3"> 
    <button class="btn btn-default" type="submit">Answer</button> 
    </div> 

И вопрос как я могу перейти к добавлению addComment без отсутствующего контекста? как:

<form data-bind="submit: function(){ writePost(<context>, '@ViewBag.UserN'); }"> 

Answer 1

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

Во-первых, вы должны определить модель представления, которая обертывает ваши данные пользовательского интерфейса и соединяется с службами для выполнения любой реальной логики. В простых случаях многие люди просто пишут логику, например API-вызовы, прямо в viewmodel вместо службы. Для простоты я просто сделаю это, потому что извлечение его в свой «класс» должно быть достаточно простым. Вы должны дать вашему viewmodel более описательное имя, чем post. Ниже приведен пример:

var commentViewModel = function(id, userName) { 
    var self = this; 

    this.commentText = ko.observable('');   

    this.addComment = function() { 
     var txt = self.commentText(); 

     if (txt) { 
      $.connection.boardHub.server.addComment(id, txt, userName) 
       .done(function() { 
        self.commentText(''); 
       }); 
     } 
    }; 
}; 

var commentVM = new commentViewModel('@ViewBag.Id', '@ViewBag.UserN'); 
$(function() { ko.applyBindings(commentVM); }); 

HTML:

<form class="add-comment" data-bind="submit: addComment"> 
    <div class="row"> 
    <div class="col-md-9"> 
     <input type="text" class="form-control" data-bind="textInput: commentText" /> 
    </div> 
    <div class="col-md-3"> 
     <button class="btn btn-default" type="submit">Answer</button> 
    </div> 
    </div> 
</form> 

Explaination:

Объект commentVM содержит commentText элемент. Это наблюдаемый KO, поэтому, подвергая его, назначив его this, вы можете привязать его. Затем вы можете прочитать его значение, используя механизм привязки KO вместо смешивания jQuery и KO. Привязки существуют, чтобы упростить вашу жизнь, чтобы не смешиваться с простым материалом jQuery, поэтому вы должны использовать их везде, где можете.

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

В вашем блоге Вы использовали ссылку для submit правильно. Связывая событие submit с методом addComment, этот метод будет вызван правильно. Но что по сравнению с вашим кодом отличается тем, что вы читаете текст комментария из наблюдаемого, который вы только что определили, и избегайте использования jQuery. Поскольку сама ВМ - это контекст, вам не нужно заботиться о том, как ее передать - то есть все, что вы намерены использовать из метода submit, должно обычно включаться в viewmodel.

Если по какой-либо причине вам необходимо передать какой-либо дополнительный параметр - например, динамический контент, созданный Razor, например, вы можете использовать метод bind. Вы можете больше узнать об этом here, написано чуть выше Примечание 3. Я хотел бы отметить, что, хотя он задокументирован на странице связывания click, вы можете использовать его вместе с submit (на самом деле, с любым связыванием, которое привязывается к методу). Просто для ясности, я буду включать соответствующую часть здесь, а также:

<button data-bind="click: myFunction.bind($data, 'param1', 'param2')"> 
    Click me 
</button> 

Так все, что вам нужно сделать, это указать функцию, для которой вы хотите связать, и добавьте выражение .bind($data, parameter1, parameter2,....) к нему.Обратите внимание, что здесь $data - это контекст; вы всегда должны включать его в вызов .bind. Однако, это не будет передано какой-либо параметр метода, необходимо для KO, чтобы сделать свою волшебную, так что если вы имели такую ​​функцию:

function a(x,y,z) 

тогда x будет принят param1, y будет прошло param2 и z ничего не прошло. Если вы хотите заставить пройти $data, вы должны включить его дважды в звонок bind как таковой: .bind($data, $data, ....more params).