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

正如我在评论中提到的，您没有正确使用淘汰赛。因此，我将为您提供一个通用示例，说明您应该如何使用敲除处理表单提交。

首先，您应该定义一个视图模型，它包装您的 UI 数据并连接到服务以执行任何实际逻辑。在简单的情况下，许多人只是将逻辑（例如 API 调用）直接写入视图模型而不是服务。为简单起见，我将这样做，因为将其提取到自己的“类”中应该足够简单。你应该给你的视图模型一个比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>

说明：

commentVM 对象包含一个 commentText 成员。这是一个 KO observable，因此通过将其分配给 this 来公开它，您可以绑定到它。然后你可以通过使用 KO 绑定机制而不是混合使用 jQuery 和 KO 来读取它的值。绑定的存在是为了简化你的生活，不要与普通的 jQuery 东西混在一起，所以你应该尽可能地使用它们。

您还应该公开一个可观察的数组来保存实际的 cmets，但由于这不是您的问题的一部分，我不想引入它来排除与您所询问的内容无关的任何额外噪音。

在您的 HTML 中，您正确使用了 submit 绑定。通过将submit 事件绑定到addComment 方法，该方法将被正确调用。但是与您的代码不同的是，您从刚刚定义的 observable 中读取注释文本，并避免使用 jQuery。由于 VM 本身就是上下文，因此您不必关心如何传递它——也就是说，您打算在提交方法中使用的任何内容通常都应该包含在视图模型中。

如果出于某种原因，您需要传递任何额外的参数 - 例如 Razor 生成的动态内容，您可以使用 bind 方法。您可以阅读更多关于它的信息here，它写在 Note 3 上方。我想指出，即使它记录在 click 绑定页面中，您也可以将它与提交一起使用（实际上，与任何绑定到方法的绑定一起使用）。为清楚起见，我也会在此处包含相关部分：

<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)。