2016-04-29 2 views
0

Я занимаюсь интернационализацией приложения, которое я построил. В принципе, на клике флага инициируется событие, и функция обратного вызова будет извлекать json-файл, содержащий переведенные метки приложения. Затем я установил данные json в модель. Это просто отлично работает. Наконец, я скомпилирую шаблон с моделью, и я ее визуализирую. Но я просто получаю пустую страницу, никаких ошибок в консоли, просто пустую страницу. Я console.log модель и строка, возвращаемая template(), и они НЕ соответствуют.шаблон подчеркивания НЕ скомпилирует модель, которую я передаю в аргументе

здесь упрощенный образец (приложение построен на французском *):

var app_multi_lang_model = Backbone.Model.extend({ 

    MODE_AVANCE : "mode: AVANCE", 
    MODE_OPERATEUR: "mode : OPERATEUR", 
    MENU: "Menu", 
    LANGUE: "langue", 
    FRANCAIS: "Français", 
    ANGLAIS: "Anglais", 
    CHINOIS:"Chinois", 
    ANNULER: "annuler", 
    VALIDER: "valider" 
}); 

var app_view= Backbone.View.extend({ 
     el:"#app_template_placeholder" , 
     template: _.template($('#app_template').html()), 
     events:{ 
      "click #us_flag":"us_flag_clicked" 
     }, 

    us_flag_clicked: function(){ 

     var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
      if (xhttp.readyState == 4 && xhttp.status == 200) { 
       app_multi_lang_model_instance.set(JSON.parse(xhttp.responseText)); 
       app_view_instance.render(); 
      } 
     }; 
     xhttp.open("GET", "../languages/english.js", true); //loading the json file 
     xhttp.send(); 

    }, 

    render: function(){ 

     console.log(this.model); 
     this.$el.html(this.template(this.model)); 
     console.log(this.template(this.model)); 
    } 
}); 

var app_multi_lang_model_instance= new app_multi_lang_model(); 
var app_view_instance= new app_view({model:app_multi_lang_model_instance}); 

и это, как выглядит english.js как:

{ 

    "MODE_AVANCE": "mode: AVANCED", 
    "MODE_OPERATEUR": "mode : OPERATOR", 
    "MENU": "Menu", 
    "LANGUE": "language", 
    "FRANCAIS": "French", 
    "ANGLAIS": "English", 
    "CHINOIS":"Chinese", 
    "ANNULER": "cancel" 
} 

and here are the screen of this.model just before .template(this.model) call:

and here a sample of the string that .template() returns

мы видим, что атрибуты модели теперь переведены на английском языке, но html, который должен быть представлен еще на французском языке. что я делаю неправильно? почему шаблон() все еще возвращает шаблон с прежней моделью, тогда как я передал ему обновленный. И почему браузер не отображает строку, возвращаемую template()?

+0

С 'var self = this;' перед функцией onreadystatechange и 'self.render();' вместо 'app_view_instance.render()', это лучше? – bugyt

+1

и замените 'console.log (this.model);' на 'console.log (JSON.stringify (this.model));' иметь реальное значение во время вызова. – bugyt

+0

К сожалению, ничего не изменилось –

ответ

0

Хорошо, я узнал, что случилось! проблема заключается в том, как я объявил модель.

var app_multi_lang_model = Backbone.Model.extend({ 

MODE_AVANCE : "mode: AVANCE", 
MODE_OPERATEUR: "mode : OPERATEUR", 
MENU: "Menu", 
LANGUE: "langue", 
FRANCAIS: "Français", 
ANGLAIS: "Anglais", 
CHINOIS:"Chinois", 
ANNULER: "annuler", 
VALIDER: "valider" 
}); 

атрибутов не завернутый в «по умолчанию {...}», так что мои атрибуты не рассматривается как атрибутами позвоночника (я не могу получить доступ к ним с помощью model.get). Но они существуют, потому что я могу сделать «app_multi_lang_model_instance.VALIDER», например. Когда я извлекаю JSON-файл и устанавливаю данные в свою модель с помощью model.set, я не меняю свои атрибуты, я создаю новый, завернутый в «defaults: {...}», поэтому моя модель выглядит так:

var app_multi_lang_model = Backbone.Model.extend({ 
defaults:{ 
    MODE_AVANCE : "mode: AVANCED", 
    MODE_OPERATEUR: "mode : OPERATOR", 
    MENU: "Menu", 
    LANGUE: "language", 
    FRANCAIS: "French", 
    ANGLAIS: "English", 
    CHINOIS:"Chinese", 
    ANNULER: "cancel", 
    VALIDER: "ok" 
} 
MODE_AVANCE : "mode: AVANCE", 
MODE_OPERATEUR: "mode : OPERATEUR", 
MENU: "Menu", 
LANGUE: "langue", 
FRANCAIS: "Français", 
ANGLAIS: "Anglais", 
CHINOIS:"Chinois", 
ANNULER: "annuler", 
VALIDER: "valider" 
}); 

Поэтому, когда я передаю его на _.template, он заполнит мой html атрибутами, которые он находит первым, развернутыми атрибутами.

Я установил, что перенос моих атрибутов в «defaults: {...}» и заменить эту строку: this.$el.html(this.template(this.model));: this.$el.html(this.template(this.model.toJSON()));, иначе атрибуты не будут доступны.

Но все же событие, если возвращенный html теперь корректен, браузер ничего не отображает. Зачем?

Смежные вопросы