javascript - 将输入值与 Backbone 收集数据进行比较

Question

我正在尝试使用 backbonejs 创建非常简单的登录。集合存储用户名和密码。登录 View 有两个输入，点击它应该执行检查功能并将输入值与收集的数据进行比较。

HTML 部分如下所示:

<div class="login-block">
  <script type="text/template" id="start">
    <form id="login">
      <div class="input-wrapper"><input type="text" placeholder="Username" id="username" required></div>
      <div class="input-wrapper"><input type="password" placeholder="Password" id="password" required></div>
      <div class="input-wrapper"><button class="btn">Sign in!</button></div>
    </form>
  </script>

  <div class="error" class="block">
       Error
  </div>

  <div class="success">
      Success
  </div>
</div>

这是我的Js代码:

var User = Backbone.Model.extend({
    defaults: {
      login: 'root',
      mail: 'root@mail.com',
      password: ''
    }
});

var user = new User();

//variable to store username

var loginData = {
    username: "",
    password: ""
}

// userbase
var UserCollection = Backbone.Collection.extend({
    model: User
});



var userCollection = new UserCollection([
  {
   username: 'Ivan',
   mail: 'ivan@mail.com',
   password: '1234'
  },
  {
   username: 'test',
   mail: 'test@mail.com',
   password: 'test'
  }
 ]);

// login page

var LoginView = Backbone.View.extend({
    el: $(".login-block"),

    events: {
      "click .btn": "check"
    },

    check: function(){
      loginData.username = this.$el.find("#username").val(); // store username
      loginData.password = this.$el.find("#password").val();// store password
          if (loginData.username === userCollection.each.get("username") && loginData.password === userCollection.each.get("password")) 
              {appRouter.navigate("success", {trigger: true});
          }else{
              appRouter.navigate("error", {trigger: true});
              } 
      },

      render: function () {
        //$(this.el).html(this.template());
          var template = _.template($('#start').html())
          $(this.el).html(template());
          //template: template('start');
          return this;
      }
}); 

var loginView = new LoginView({collection: userCollection});

var AppRouter = Backbone.Router.extend({
    routes: {
       '': 'index', // start page
       '/error': 'error',
       '/success': 'success'
    },

    index: function() {
         loginView.render();
         console.log("index loaded");
    }, 

    error: function(){
      alert ('error');
    },

    success: function(){

      console.log('success');
    }


});

var appRouter = new AppRouter();

Backbone.history.start();

它对检查功能工作正常，它存储用户名和密码，但在开始比较时路由器或检查功能显然有问题。它不会路由到成功或错误页面，而是重新呈现索引页面。

P.S 我没有使用命名空间，一般来说代码的质量不是最好的，但它仅用于教育目的。

Answer 1

您必须将属性 type="button" 添加到您的按钮，否则它会在单击时提交表单(参见 this question ):

<script type="text/template" id="start">
  <form id="login">
    <div class="input-wrapper"><input type="text" placeholder="Username" id="username" required></div>
    <div class="input-wrapper"><input type="password" placeholder="Password" id="password" required></div>
    <div class="input-wrapper"><button class="btn" type="button">Sign in!</button></div>
  </form>
</script>

您还可以在点击事件处理程序中返回 false，这将取消默认操作。 (提交表单，如果您不添加 type="button")。

为了将这些值与硬编码的集合进行比较，您不能在执行操作时调用 each(这是 Underscore 提供的 iteration function)，因为您会收到错误消息。您可以使用下划线的 findWhere Backbone 集合中也可用的方法。所以点击事件处理程序(您的 check 函数)可能如下所示:

check: function(){
    loginData.username = this.$el.find("#username").val(); // store username
    loginData.password = this.$el.find("#password").val();// store password            
    if(userCollection.findWhere({username: loginData.username, password: loginData.password})){
        appRouter.navigate("success", {trigger: true});
    }else{
        appRouter.navigate("error", {trigger: true});
    } 
    return false;
},

您可以在 this fiddle 上试用