从 javascript 文件中剔除 js 模板

Question

I'm submitting a form to a php file, which returns some products from the database. I now need to add a knockout template with the returned data. Here is the code:

$("#search-filter-form").submit(function(event) {
        // stop form from submitting normally 
        event.preventDefault();

        // get some values from elements on the page: 
        var $form = $( this ),
            url = $form.attr( 'action' );

        // Send the data using post 
        var posting = $.post(url, 
            {   place: searchFilterViewModel.searchFilterAutoComplete.placeObject,
                categories: searchFilterViewModel.categorySelect.selectedCategories
            }).done(function(data) {
                searchResultsViewModel.allProducts(JSON.parse(data));
                for(var x = 0; x < searchResultsViewModel.allProducts().length; x++) {
                    $("search-results").append();// NEED TO APPEND THE KNOCKOUT TEMPLATE HERE
                }
            });
    });

I want to have a seperate file with the html template. I have created this example file:

product_template.html:

<script type="text/html" id="product-template">
    <h3 data-bind="text: allProducts.name"></h3>
    <p>Credits: <span data-bind="text: credits"></span></p>
</script>

How do I get that template file to print out, from within the javascript function above?

Answer 1

Store the data in an observable/object, and pass that to the template itself, so it can read it.

You only linked the template file, you need another line to apply data to it, eg

<div data-bind="template: { name: 'product-template', data: buyer }"></div>