alex/restaurant-search
1
Fork 0
Code Releases Activity

Templating work

Browse Source
This commit is contained in:
Alex Yatskov 2015-03-02 15:42:02 +09:00
parent df9e311f2b
commit f9e44e044f
2 changed files with 66 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
client/profile.html
View File

@ -25,37 +25,37 @@
<th class="text-right">Rating</th>
</tr>
</thead>
<tbody id="categories">
<script id="template" type="text/x-handlers-template">
{{#each categories}}
<tr>
<td class="text-left">{{description}}</td>
<td class="text-right">
<label class="radio-inline">
<input type="radio" name="category_{{id}}" value="1" {{checkMatch 1}}> Agree
</label>
<label class="radio-inline">
<input type="radio" name="category_{{id}}" value="0" {{checkMatch 0}}> Neither
</label>
<label class="radio-inline">
<input type="radio" name="category_{{id}}" value="-1" {{checkMatch -1}}> Disagree
</label>
</td>
</tr>
{{/each}}
</script>
</tbody>
<tbody id="categories"></tbody>
<script id="template" type="text/x-handlers-template">
{{#each categories}}
<tr>
<td class="text-left">{{description}}</td>
<td class="text-right">
<label class="radio-inline">
<input type="radio" name="category_{{@key}}" categoryId="{{@key}}" value="1" {{checkMatch 1}}> Agree
</label>
<label class="radio-inline">
<input type="radio" name="category_{{@key}}" categoryId="{{@key}}" value="0" {{checkMatch 0}}> Neither
</label>
<label class="radio-inline">
<input type="radio" name="category_{{@key}}" categoryId="{{@key}}" value="-1" {{checkMatch -1}}> Disagree
</label>
</td>
</tr>
{{/each}}
</script>
</table>
<!-- category adder -->
<div class="input-group">
<input type="text" class="form-control" placeholder="New category description">
<input type="text" class="form-control" id="newCategory" placeholder="New category description">
<span class="input-group-btn">
<button class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
<button class="btn btn-primary" id="addCategory"><span class="glyphicon glyphicon-plus"></span></button>
</span>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
<script src="bower_components/underscore/underscore.js"></script>

56
client/scripts/profile.js
View File

@ -20,29 +20,61 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
(function(hscd) {
(function(categories) {
'use strict';
function displayCategories(categories) {
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}
function transmitCategories() {
console.log(categories);
}
function displayCategories() {
var template = Handlebars.compile($('#template').html());
$('#categories').empty();
$('#categories').append(template({categories: categories}));
$('#categories input:radio').change(function() {
categories[$(this).attr('categoryId')].value = parseInt(this.value);
transmitCategories();
});
}
function addCategory(description) {
description = description.trim();
if (!description) {
return;
}
categories[guid()] = {description: description, value: 0};
transmitCategories();
displayCategories();
}
function onReady() {
Handlebars.registerHelper('checkMatch', function(value, options) {
return new Handlebars.SafeString(
value == this.value ? 'checked' : ''
);
return new Handlebars.SafeString(value == this.value ? 'checked' : '');
});
var categories = [
{description: 'Description1', id: 0, value: -1},
{description: 'Description2', id: 1, value: 0},
{description: 'Description3', id: 2, value: 1},
];
categories = {
0: {description: 'Description1', value: -1},
1: {description: 'Description2', value: 0},
2: {description: 'Description3', value: 1},
};
displayCategories(categories);
$('#addCategory').click(function() {
addCategory($('#newCategory').val());
});
displayCategories();
}
$(document).on({
@ -50,4 +82,4 @@
ajaxStop: function() { $('#spinner').hide(); },
ready: onReady()
});
})();
})(window.categories = window.categories || {});