Skip to content
This repository has been archived by the owner on Mar 11, 2024. It is now read-only.

Commit

Permalink
Added support for binding raw unescaped html
Browse files Browse the repository at this point in the history
  • Loading branch information
@nathanpalmer
nathanpalmer committed Aug 20, 2012
1 parent 5cb6dfe commit 106dd8b
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 21 deletions.
40 changes: 28 additions & 12 deletions spec/SpineDataBindSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ describe("Spine.DataBind", function() {
"companies",
"person",
"title",
"homepage"
"homepage",
"rawHtml"
);

PersonController = Spine.Controller.sub();
Expand Down Expand Up @@ -159,7 +160,7 @@ describe("Spine.DataBind", function() {
expect(Person.constructor._callbacks["update[firstName]"].length).toBe(1);
} else {
Person.bind("change", function() { console.log("update"); });
expect(Person.constructor._callbacks["change"].length).toBe(6);
expect(Person.constructor._callbacks["change"].length).toBe(7);
Controller.destroyBindings();
expect(Person.constructor._callbacks["change"].length).toBe(1);
}
Expand All @@ -175,9 +176,9 @@ describe("Spine.DataBind", function() {
expect(Person.constructor._callbacks["update[firstName]"].length).toBe(6);
} else {
Person.bind("change", function() { console.log("update"); });
expect(Person.constructor._callbacks["change"].length).toBe(6);
expect(Person.constructor._callbacks["change"].length).toBe(7);
Controller.refreshBindings(Person);
expect(Person.constructor._callbacks["change"].length).toBe(6);
expect(Person.constructor._callbacks["change"].length).toBe(7);
}
});

Expand All @@ -194,7 +195,7 @@ describe("Spine.DataBind", function() {
if (Watch) {
expect(Person.constructor._callbacks["update[firstName]"].length).toBe(current+5);
} else {
expect(Person.constructor._callbacks["change"].length).toBe(current+5);
expect(Person.constructor._callbacks["change"].length).toBe(current+6);
}
});

Expand All @@ -221,6 +222,14 @@ describe("Spine.DataBind", function() {

expect(binder.change).not.toHaveBeenCalled();
});

it("should set unescaped html with the html binder", function() {
Person.rawHtml = "<p>Paragraph</p>";
if (!Watch) Person.save();

var rawHtml = $('#rawHtml');
expect(rawHtml.html()).toBe("<p>Paragraph</p>");
});
};

describe("with bindings", function() {
Expand All @@ -230,7 +239,8 @@ describe("Spine.DataBind", function() {
"<div id='firstNameDiv'/>",
"<input type='text' id='firstName'/>",
"<input type='textarea' id='firstNameTextArea'/>",
"<select id='firstNameSelect'><option value='Other'/><option value='Nathan'/><option value='Eric'/></select>"
"<select id='firstNameSelect'><option value='Other'/><option value='Nathan'/><option value='Eric'/></select>",
"<div id='rawHtml'/>"
].join(""));

PersonController.include({
Expand All @@ -239,7 +249,8 @@ describe("Spine.DataBind", function() {
"text #firstNameDiv":"firstName",
"value #firstName":"firstName",
"value #firstNameTextArea":"firstName",
"value #firstNameSelect":"firstName"
"value #firstNameSelect":"firstName",
"html #rawHtml":"rawHtml"
}
});

Expand All @@ -249,7 +260,8 @@ describe("Spine.DataBind", function() {
"text #firstNameDiv":"firstName",
"value #firstName":"firstName",
"value #firstNameTextArea":"firstName",
"value #firstNameSelect":"firstName"
"value #firstNameSelect":"firstName",
"html #rawHtml":"rawHtml"
}
});

Expand All @@ -268,7 +280,8 @@ describe("Spine.DataBind", function() {
"<div id='firstNameDiv'/>",
"<input type='text' id='firstName'/>",
"<input type='textarea' id='firstNameTextArea'/>",
"<select id='firstNameSelect'><option value='Other'/><option value='Nathan'/><option value='Eric'/></select>"
"<select id='firstNameSelect'><option value='Other'/><option value='Nathan'/><option value='Eric'/></select>",
"<div id='rawHtml'/>"
].join(""));

PersonController.include({
Expand All @@ -277,7 +290,8 @@ describe("Spine.DataBind", function() {
"text #firstNameDiv":"firstName",
"value #firstName":"firstName",
"value #firstNameTextArea":"firstName",
"value #firstNameSelect":"firstName"
"value #firstNameSelect":"firstName",
"html #rawHtml":"rawHtml"
}
});

Expand Down Expand Up @@ -307,7 +321,8 @@ describe("Spine.DataBind", function() {
"<div id='firstNameDiv' data-bind='text: firstName'/>",
"<input type='text' id='firstName' data-bind='value: firstName'/>",
"<input type='textarea' id='firstNameTextArea' data-bind='value: firstName'/>",
"<select id='firstNameSelect' data-bind='value: firstName'><option value='Other'/><option value='Nathan'/><option value='Eric'/></select>"
"<select id='firstNameSelect' data-bind='value: firstName'><option value='Other'/><option value='Nathan'/><option value='Eric'/></select>",
"<div id='rawHtml' data-bind='html: rawHtml'/>"
].join(""));

Watch = false;
Expand All @@ -325,7 +340,8 @@ describe("Spine.DataBind", function() {
"<div id='firstNameDiv' data-bind='text: firstName'/>",
"<input type='text' id='firstName' data-bind='value: firstName'/>",
"<input type='textarea' id='firstNameTextArea' data-bind='value: firstName'/>",
"<select id='firstNameSelect' data-bind='value: firstName'><option value='Other'/><option value='Nathan'/><option value='Eric'/></select>"
"<select id='firstNameSelect' data-bind='value: firstName'><option value='Other'/><option value='Nathan'/><option value='Eric'/></select>",
"<div id='rawHtml' data-bind='html: rawHtml'/>"
].join(""));

Watch = true;
Expand Down
13 changes: 9 additions & 4 deletions src/spine.databind.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ class Template
model[property] = value

class Update extends Template
keys: [ "text", "value" ]
keys: [ "text", "value", "html" ]

bind: (operators,model,controller,el,options) ->
@bindToElement(operators,model,controller,el,options)
Expand Down Expand Up @@ -82,11 +82,16 @@ class Update extends Template
e.find("option[value=#{value}]").attr("selected","selected")
else
if typeof value is "object" and value and value.constructor is Array
e.text(value.join(","))
formatted = value.join(",")
else if typeof value is "object" and value
e.text(value.toString())
formatted = value.toString()
else
e.text(value)
formatted = value

if operator.name is "html"
e.html(formatted)
else
e.text(formatted)

@
@
Expand Down
15 changes: 10 additions & 5 deletions src/spine.databind.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 106dd8b

Please sign in to comment.