ReferenceError: obj is not defined using webcomponents & polymer

Question

这是我第一个使用 web 组件的项目，我充其量只是 js/jquery 的菜鸟，所以我不确定为什么会这样。

我在 "search-form.html" 中内置了一个自定义元素，然后我的所有组件和脚本都通过索引头部的主 "components.html" 引入...

index.html:

<head>
    <meta charset='utf-8'>  
    <script src="/static/template/js/webcomponents.min.js"></script>
    <link rel="import" href="/static/template/components/components.html">
    <link rel="icon" type="image/png" href="/static/template/img/favicon.png">
</head>

components.html:

<!-- POLYMER MUST BE LOADED -->
<link rel="import" href="/static/template/polymer/polymer.html">

<!-- TEMPLATE SCRIPTS -->
<link rel="import" href="/static/template/components/scripts.html">
<!-- Loads jquery and other scripts -->

<!-- TEMPLATE COMPONENTS -->
<link rel="import" href="/static/template/components/search-form.html">

然后搜索-form.html 看起来像这样：

<!-- Defines element markup -->
<dom-module id="search-form">
<template>
    <div class="input-prepend input-append">
        <form id="search" method="get" action="/property/search">
            <div class="btn-group">
                <button id="search-type" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
                    Search by
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a data-name="city" data-label="city">City</a></li>
                    <li><a data-name="zip" data-label="zip">Zip Code</a></li>
                    <li><a data-name="mls" data-label="mls">MLS Number</a></li>
                </ul>
            </div>
            <input id="input-tag" class="input-xlarge" type="text" placeholder="Select a search type..." data-provide="typeahead" value="" />
            <button type="submit" class="btn"><i class="fa fa-search"></i></button>
        </form>
    </div>
</template>

<script>
/********************************
/ TYPEAHEAD ARRAY
/*******************************/
var obj = {
    "city" : [],
    "zip" : [],
};

$(document).ready(function() {
    /*dynamic zipcode*/ 
    for(i=43000; i<=45999;i++){
        obj.zip.push({val: i.toString(), string: i.toString()});
    }
    for(i=48000; i<=49999;i++){
        obj.zip.push({val: i.toString(), string: i.toString()});
    }
});

/********************************
/ SEARCH TYPEAHEAD FUNCTION
/*******************************/
$(function searchTag($) {   

    var data = [];

    $('.dropdown-menu > li > a').on("click", function() {
        data = $(this).data('name');
    });

    var that = this;
    $('#input-tag').typeahead({
        source: function(query, process) {
                var results = _.map(obj[data], function(value) {
                    return value.val;
                });
                process(results);
        },
        highlighter: function(val) {
            var value = _.find(obj[data], function(p) {
                return p.val == val;
            });
            return value.string;
        },
        updater: function(val) {
            var value = _.find(obj[data], function(p) {
                return p.val == val;
            });
            that.setSelected(value);
            return value.string;
        }
    });
    this.setSelected = function(value) {
        $('#input-tag').val(value.string);
        //$('#input-tag').attr('data-value', value.val);
        $('#input-tag').data('value', value.val);
    };
});

/********************************
/ QUICK SEARCH TAG FUNCTION
/*******************************/
$(function () {

    var caret = ' <span class="caret"></span>';

    function searchSelect() {
        $('.dropdown-menu > li > a').on("click", function() {
            $('#search-type').html($(this).text() + caret);
            $('#input-tag').attr('placeholder', $(this).data('label'));
            $('#input-tag').attr('name', $(this).data('label'));
        });
    }searchSelect();
});

Polymer({
        is: 'search-form',
        created: function() {},
        ready: function() {},
        attached: function() {},
        detached: function() {},
        attributeChanged: function(name, type) {}
});
</script>
</dom-module>

所以 var obj 在搜索中声明-form.html

最后，由于我们后端的编写方式，我必须运行在 index.html 上循环以获得要在 var[=40 中使用的数组=] obj 对于 "city" : [],

看起来像这样：

/*TYPEAHEAD ARRAY*/ //MUST BE RUN FROM SHELL BECAUSE OF THE TMPL LOOP  obj.city.push({val: "", string: ""}) 

那么问题来了。这一切在 chrome 中都没有错误，但我在 FF、IE11 和 Edge 中遇到了同样的错误。该错误是：

ReferenceError: obj is not defined obj.city.push({val: "ALLEN PARK", string: "ALLEN PARK"})

伙计，我希望我把这件事记录得足够好，以便有人能提供帮助，因为在转向堆叠之前，我已经把我的头发拉了好几个小时:)

Answer 1

我认为当您访问 index.html 中的 obj var 时，导入尚未加载，因此此时 obj 未定义。由于 Chrome 原生支持 HTML 导入，导入会较早加载并在那里工作。将对 obj 的访问包装在 HTMLImports.whenReady(callback) 中。当所有 HTML 导入完成加载时将调用回调。

HTMLImports.whenReady(function(){
    <!-- TMPL_LOOP Cities -->
    obj.city.push({val: "<!-- TMPL_VAR city_name -->", string: "<!-- TMPL_VAR city_name -->"})
    <!-- /TMPL_LOOP -->
});

ReferenceError: obj is not defined using webcomponents & polymer

ReferenceError: obj is not defined using webcomponents & polymer

javascript

jquery

web-component

polymer