tickout.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调用。 为了简单起见，我将这样做，因为将其提取到自己的“类”中应该足够简单。 您应该给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>

说明：

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

您还应该公开一个可观察的数组来保存实际的注释，但是由于这不是您的问题的一部分，因此我不想引入它来排除与您的要求无关的任何其他噪音。

在HTML中，您正确使用了submit绑定。 通过结合submit事件到addComment方法，这个方法将被正确调用。 但是与您的代码相比，不同之处在于您从刚刚定义的可观察对象中读取注释文本，并避免使用jQuery。 由于VM本身就是上下文，因此您不必关心如何传递它-也就是说，您打算在Submit方法中使用的任何内容通常都应该包含在viewmodel中。

如果出于某种原因，您需要传递任何额外的参数，例如Razor生成的动态内容，则可以使用bind方法。 您可以在此处阅读有关它的更多信息，它写在注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) 。