草庐IT

javascript - 将 Knockout observableArray JSON 保存到 localStorage

coder 2023-08-11 原文

我正在尝试使用 ko.toJSON 方法将 observableArray 保存到 localStorage。在第一个页面加载时，我的应用程序将从服务器接收一个 JSON 对象并填充 observableArray。我想将它存储在 localStorage 中以进行优化和离线使用，但 ko.toJSON 返回 []，即使其中有明确的数据。

我可以在这个 jsFiddle 重现这个问题

HTML

<span data-bind="text: locations().length"></span>
<div data-bind="foreach: locations">
    <div>
        <span data-bind="text: title"></span>
        <span> </span>
        <span data-bind="text: timeZone"></span>
    </div>
</div>
<pre data-bind="text: output"></pre>

JavaScript

var dataFromServer = [
    {name: "Cleveland", zone: "EST"},
    {name: "Chicago", zone: "CST"},
    {name: "New York", zone: "EST"}
];

var MyNS = window.MyNS || {};
MyNS.ViewModel = function () {
    var self = this;
    self.locations = ko.observableArray([]);
    self.load = function (){
        var mappedData = ko.utils.arrayMap(dataFromServer, function(item) {
            return new MyNS.Location(item.name, item.zone);
        });
        self.locations(mappedData);
    };
    self.output = ko.toJSON(self.locations());
    self.execute = function(){
        self.load();
        ko.applyBindings(self);
    };
};
MyNS.Location = function (t, z) {
    this.title = t;
    this.timeZone = z;
};
var model = new MyNS.ViewModel();
model.execute();

最佳答案

问题是 output 变量的值只写入一次，在第一次运行构造函数时，当 locations 数组为空时。要更新位置更改的输出，您可以将其转换为计算可观察量，如下所示:

self.output = ko.computed(function(){
    return ko.toJSON(self.locations())
});

更新后的 fiddle :http://jsfiddle.net/wvgRL/4/

关于javascript - 将 Knockout observableArray JSON 保存到 localStorage，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19886444/

observableArraylocalStoragesectionlocations34javascriptjsonhtmlknockout.js

有关javascript - 将 Knockout observableArray JSON 保存到 localStorage的更多相关文章

  1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  2. ruby - 将哈希值保存到 Ruby 上的文件 - 2

    我刚刚迈出了编程的第一步。我刚刚完成了CodeAcademy的另一门类(class)。这次我被要求创建一个小电影目录。这是我的问题:如何在文件中保存/加载带有电影标题和评级的哈希值而不是自己的代码？下面是代码现在的样子(几句葡萄牙语，但您可以忽略它:movies={Memento:3,Primer:4,Ishtar:1}puts"Oquevocêgostariadefazer?"puts"--Digite'add'paraadicionarumfilme."puts"--Digite'update'paraatualizarumfilme."puts"--Digite'display'

  3. ruby-on-rails - 如何在 Ruby on Rails 中将数组持久保存到数据库？ - 2

    我正在尝试将一个数组的数组保存到我在Rails中的SQLite数据库中。现在，我有一个可以容纳这样一个数组的对象，并且实例似乎可以毫无问题地保存。但是，它显然没有保存到数据库中——当我在与创建数组的View不同的View中调用My_Object.array上的函数时，结果为nil并且不起作用。例如:classMy_Object当我调用My_Object.new(:array=>[[1,2,3],[4,5,6]])时，一切似乎都正常工作，但我不能在其他任何地方访问:array属性，结果都是nil。有什么想法吗？ 最佳答案 首先在您的表

  4. ruby-on-rails - 如何在 Rails 3 中保存到数据库之前格式化值 - 2

    我有一个带有利润字段的用户模型。利润字段是DECIMAL(11,0)类型。我在表单上有一个屏蔽输入，允许用户输入1,000美元之类的内容。我想格式化该值并从中删除除数字以外的所有内容，这样我将保存1000。这是我到目前为止所拥有的:classUser但它一直在数据库中保存0。看起来它在我的格式化函数之前将其转换为十进制。 最佳答案 试试这个:defprofit=(new_profit)self[:profit]=new_profit.gsub(/[^0-9]/,'')end 关于ruby

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. ruby-on-rails - ActiveRecord 验证失败后如何将内容保存到数据库？ - 2

    基本上我想要做的是在MyModelLog表中记录对MyModel的操作。这是一些伪代码:classMyModel我也有一个看起来像这样的模型:classMyModelLog"somethinghappened")endend为了记录我尝试:在MyModel的something方法中添加MyModelLog.log_something在MyModel的after_validation回调上调用MyModelLog.log_something在这两种情况下，创建都会在验证失败时回滚，因为它在验证事务中。当然我也想在验证失败时记录。我真的不想登录文件或数据库以外的其他地方，因为我需要日志条目

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby-on-rails - 序列化时无法将空数组保存到数据库 - 2

    在RubyonRails中，如果数组为空，则具有序列化数组字段的模型将不会在.save()上更新，而它之前有数据。我正在使用:ruby2.2.1rails4.2.1sqlite31.3.10我创建了一个字段设置为文本的新模型:railsgmodel用户名:stringexample:text在我添加的User.rb文件中:serialize:example,Array我实例化了User类的一个新实例:test=User.new然后我保存用户以确保它正确保存:test.save()(0.1ms)begintransactionSQL(0.4ms)INSERTINTO"users"("cr

  9. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  10. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

随机推荐