个人中心
gpt4 book ai didi

javascript - 当模型更改时， View 中的列表不会更新

转载 作者：行者123 更新时间：2023-12-03 03:14:26 32 4
gpt4 key购买 nike

我正在尝试使用 knockout.js 构建 MVVM。这个想法是 $(document).ready(function() {...} 中的脚本添加一个新项目 model.addElement("value"); -每 3 秒为模型添加一次“值”，并且应该以 HTML 形式显示。虽然在控制台输出中您可以看到模型正在更改并且元素被推送到 items 列表，但 HTML 保持不变。

同时，如果我取消注释 self.items.push($('#new_item').val()); 行 - 每次添加元素时 HTML 页面都会发生变化到模型。

请帮助我理解我做错了什么，为什么我不能通过 model.addElement("value"); 行传递这个“value”字符串？

// Overall viewmodel for this screen, along with initial state
var ListsViewModel = function(item) {
  var self = this;
  self.item = item;

  self.items = ko.observableArray(["First", "Second", "Third"]);

  self.addElement = function(item) {
    self.items().push(item);
    //self.items.push($('#new_item').val()); //--> uncomment for adding element with a button click
  }

};
var model = new ListsViewModel()
ko.applyBindings(model, document.getElementById("one"));

$(document).ready(function() {
  //comment this if you want add elements only when you click on button
  setInterval(function() {
    model.addElement("value");
    console.log(model.items());
  }, 3000);
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <title>Updating list to the server (automatically)</title>

</head>

<body>
  <div id="one">
    <h1>Records:</h1>

    <div class="list-group" data-bind="foreach: items">
      <a href="#" class="list-group-item" data-bind="text: $data"></a>
    </div>

    <div class="form-group">
      <label for="new_item">Item name:</label>
      <input type="text" class="form-control" id="new_item">
    </div>

    <form>
      <input type="button" class="btn btn-info" value="Add element" data-bind="click: addElement">
    </form>
  </div>
</body>
<script src="static/js/viewModel.js"></script>
<script src="static/js/main.js"></script>

</html>

UPD:也许我说得不清楚，我想要的是每 3 秒将新值添加到模型中，并且此更改显示在 View (HTML) 上。正如 @user3297291 建议的那样，我实现了将 self.items().push(item); 更改为 self.items.push(item); 。这是代码的最终版本，它完全按照我想要的方式工作:

// Overall viewmodel for this screen, along with initial state
var ListsViewModel = function() {
  var self = this;

  self.items = ko.observableArray(["First", "Second", "Third"]);
  //self.item = ko.observable("");

  self.addElement = function(item) {
    self.items.push(item);
  }

};
var model = new ListsViewModel()
ko.applyBindings(model, document.getElementById("one"));

$(document).ready(function() {
  //comment this if you want add elements only when you click on button
  setInterval(function() {
    model.addElement("value");
    console.log(model.items());
  }, 3000);
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

  <title>Updating list to the server (automatically)</title>


</head>

<body>
  <div id="one">
    <h1>Records:</h1>

    <div class="list-group" data-bind="foreach: items">
      <a href="#" class="list-group-item" data-bind="text: $data"></a>
    </div>
  </div>
</body>
<script src="static/js/viewModel.js"></script>
<script src="static/js/main.js"></script>

</html>

最佳答案

修复了一些小错误，使您的代码片段正常工作:

  • 不要推送到数组内部 self.items ，因为 knockout 将无法注意到其内容发生了变化。推送至observableArray直接:self.items.push而不是self.items().push
  • 制造self.item可观察，以便您可以将其值绑定(bind)到文本输入: self.item = ko.observable("")
  • 使用value绑定(bind)到同步self.item和<input/>.value :<input data-bind="value: item">
  • addElement不接收项目，它接收事件和当前绑定(bind)上下文。相反，您可以使用 self.item() 检索文本框的值。 ，按下它，然后使用 self.item("") 清除它

使用 knockout 时，您可以将规则设置为除了通过 knockout 绑定(bind)之外不以任何其他方式接触 DOM。每当您使用 jQuery 来设置或检索值时，您应该问的第一个问题是“我可以使用什么 knockout 绑定(bind)来代替”。

修复版本:

// Overall viewmodel for this screen, along with initial state
var ListsViewModel = function(item) {
  var self = this;
  self.item = ko.observable("");

  self.items = ko.observableArray(["First", "Second", "Third"]);

  self.addElement = function() {
    self.items.push(self.item());
    self.item("");
  }

};
var model = new ListsViewModel()
ko.applyBindings(model, document.getElementById("one"));
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <title>Updating list to the server (automatically)</title>

</head>

<body>
  <div id="one">
    <h1>Records:</h1>

    <div class="list-group" data-bind="foreach: items">
      <a href="#" class="list-group-item" data-bind="text: $data"></a>
    </div>

    <div class="form-group">
      <label for="new_item">Item name:</label>
      <input type="text" class="form-control" id="new_item" data-bind="value: item">
    </div>

    <form>
      <input type="button" class="btn btn-info" value="Add element" data-bind="click: addElement">
    </form>
  </div>
</body>
<script src="static/js/viewModel.js"></script>
<script src="static/js/main.js"></script>

</html>

关于javascript - 当模型更改时， View 中的列表不会更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46830272/

32 4 0
文章推荐： firebase - 方法 'sendEmailVerification' 没有为类型 'UserCredential' 定义。 Firebase flutter
文章推荐： javascript - 意外 'continue'
文章推荐： flutter - 如何在 Flutter 中的新 OutlinedButton 小部件上实现圆角？
文章推荐： JavaScript - 如何检查事件是否已添加
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com