2013-12-04 3 views
2

Итак, имея в виду исходную проблему, у меня есть Google Maps Javascript V3 Uncaught TypeError: Cannot read property 'offsetWidth' of null, и после многого поиска в Google я нашел решение, которое, как я думал, будет работоспособным, и это How to append multiple Google Maps areas to divs using Handlebars.контекст не определен JavaScript

Однако я реализовал мину следующим образом

var EmployeeView = function(employee){ 
    this.render = function(){ 
    $('body').append(this.el); 
     // inside the new div, put the Handlebars template, with the data from the employee 
     this.el.html(EmployeeView.template(employee)).ready(function() { 
     var mapOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 8 
     }; 
     var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
     }); 
     return this; 
    }; 

    this.initialize = function(){ 
     this.el=$("</div>"); 
     window.localStorage.removeItem('paramId'); 
     console.log('removed'); 
     window.localStorage.setItem('paramId',employee); 
     console.log('added ' + employee.id);  
    }; 
    this.initialize(); 
    } 

EmployeeView.template = Handlebars.compile($("#employee-tpl").html()); 

Не уверен, что если тот правильном пути «со ссылкой» к этому решению, но теперь, когда я бегу страница, следующая ошибка возникает Uncaught ReferenceError: context is not defined

У кого-нибудь есть идеи? и добавить мой HTML выглядит следующим образом

<body> 
<script id="employee-tpl" type="text/x-handlebars-template"> 
    <div class='details'> 
    <img class='employee-image' src='img/{{firstName}}_{{lastName}}.jpg' /> 
    <ul> 
     <li><a href="#map/{{this.id}}">See on map</a></li>   
     <li>Share with friends</li> 
     <li><div id="map-canvas"/></li> 
    </ul> 
    <script src="lib/iscroll.js"></script> 
    <script src="lib/handlebars.js"></script> 
    <script src="lib/jquery-1.8.2.min.js"></script> 
    <script src="js/storage/cafe-memory-store.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?APIKEY&sensor=true"></script> 
    <script src="js/MapView.js"></script> 
    <script src="js/EmployeeView.js"></script> 
    <script src="js/HomeView.js"></script> 
    <script src="js/main.js"></script> 
</body> 
+0

Это означает, что переменная 'context' не определена: также определена функция' HTMLtemplate (context) '? В противном случае это должно быть «EmployeeView.template» в этом месте, я думаю. – MarcoL

+0

, но ссылаясь на http://stackoverflow.com/questions/10006898/how-to-append-multiple-google-maps-areas-to-divs-using-handlebars, это не похоже на то, что HTMLTemplate и 'context' являются дополнительными хотя? пожалуйста, исправьте меня :( – eddy

+0

Я вижу их, определенные в фрагменте кода на странице. – MarcoL

ответ

2

В этой строке:

$("employee-tpl").append(HTMLtemplate(context)) 

Вы пропускание undefined функцию и одну undefined переменного (context). context должен содержать ситемы id параметра, определенный в шаблоне HandlebarJS заменить

<a href="#map/{{this.id}}">See on map</a> 

HTMLTemplate в вашем случае EmployeeView.template который держит HandlebarJS скомпилированных шаблонов: это функция, которая принимает в качестве аргументов переменной context (или, может быть, ? employee переменная)

Если бы я получил это право ваш код должен быть:

var EmployeeView = function(employee){ 

    this.render = function(){ 
    $('body').append(this.el); 
    // inside the new div, put the Handlebars template, with the data from the employee 
    this.el.html(EmployeeView.template(employee))).ready(function() { 
     var mapOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8 

     }; 
     var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
    }); 


    return this; 
    }; 



    this.initialize = function(){ 
    this.el=.$("</div>"); 
    window.localStorage.removeItem('paramId'); 
    console.log('removed'); 
    window.localStorage.setItem('paramId',employee); 
    console.log('added ' + employee.id);  
    }; 
    this.initialize(); 


} 

EmployeeView.template = Handlebars.compile($("#employee-tpl").html()); 

Я думаю, вы должны пройти employee к шаблону, потому что я видел first_name и last_name в шаблоне.

+0

Привет, Марко, я обновил свой код, как указано выше, однако теперь он бросает другую ошибку 'Uncaught ReferenceError: employee не определен' – eddy

+0

ваш совет @marcocl, теперь он бросает «Uncaught TypeError: не может прочитать свойство« offsetWidth »из null», и я понимаю, что это связано с тем, что div не отображается в момент, когда эта функция называется \ – eddy

+0

. Он не находит элемент для добавления ваш шаблон: я обновил ответ.;) – MarcoL

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