0
Я пытаюсь использовать инструмент фрагмента стека для вставки живого демоверсии в свой пост. Но я обнаруживаю, что при добавлении функции localstorage в демонстрационный пример он не может работать хорошо.
Итак, я упростил свой вопрос к основному корпусу, чтобы подчеркнуть проблему localstorage, как указано выше.
И если я удалю поток localstorage, демо может работать очень хорошо, но если localstorage добавлен, то он не сможет работать хорошо. Сообщение об ошибке с консоли указано Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.Демо-кейс backbonejs не может нормально работать с localstorage, добавленным в стеке.
Любая идея?
// A simple case
var Daymodel = Backbone.Model.extend({
\t defaults : {
\t \t day: 1,
\t }
});
var DayCollection = Backbone.Collection.extend({
\t model: Daymodel,
\t localStorage: new Backbone.LocalStorage("test-simple")
});
// The view for each day panel
var DayView = Backbone.View.extend({
\t tagName:"div",
\t template: _.template($('#eachday-template').html()),
\t initialize: function() {
\t \t this.listenTo(this.model, "change", this.render);
\t }, \t
\t render: function(){
\t \t this.$el.html(this.template(this.model.toJSON()));
\t \t return this;
\t }
});
// The view for the entire application
var AppView = Backbone.View.extend({
el: $('#todoapp'),
events: {
\t "click #add-firebase":"addToLocalhost"
},
initialize: function() {
this.daylist = this.$("#container"); // the daylist to append to
this.listenTo(this.collection, 'add', this.addOne);
\t this.collection.fetch();
},
addOne: function(todo) {
\t var view = new DayView({model:todo});
this.daylist.append(view.render().el);
},
addToLocalhost: function(){
\t this.collection.create({
\t \t day : this.collection.length + 1,
\t });
}
});
// Create a function to kick off our BackboneFire app
function init() {
// The data we are syncing from our remote Firebase database
var collection = new DayCollection();
var app = new AppView({ collection: collection });
}
// When the document is ready, call the init function
$(function() {
init();
});<div id="todoapp">
<div id="container"></div>
<button id="add-firebase">Add to Localstorage</button>
</div>
<script type="text/template" id="eachday-template">
\t <h3 class="which-day"> day <%= day %></h3>
<ul id="todo-list"></ul>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.16/backbone.localStorage-min.js">
</script>