Question

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

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）。您可以使用Underscore的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

上试用

Answer 2

你正在做的逻辑检查看起来不像对我有用。我希望以下内容生成错误：

userCollection.each.get('username')

您在集合上调用的函数，每个函数都是一个包装的下划线方法，它将函数回调作为参数。如果你想检查你的用户名和密码，我会做这样的事情：

var user = userCollection.findWhere({ username: loginData.userName });

这将返回用户名匹配的模型。然后，您可以检查该模型的密码：

if (user.get('password') === loginData.password) {
  // do something
} else {
  // do something else 
}

编辑哎呀，你可以一次做两次检查：

var user = userCollection.findWhere({ username: loginData.userName, password: loginData.password });

我将保留以前的代码以进行演示。

将输入值与骨干收集数据进行比较

2 个答案: